电子教材阅读器
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
litian
2024-05-08 f22883b1db1d7f5c2593e47a709a2fbc857a9186 
 src/views/home.vue


@@ -1,7 +1,12 @@


<template>


  <div class="homeBox">


    <div class="headerBox">


      <p>数字教材平台</p>


      <div><p>数字教材平台</p></div>


      <div class="userInfoBox">


        <div></div>


        <div></div>


        <div><div class="layout">退出</div></div>


      </div>


    </div>


    <div class="contentBox">


      <!-- 菜单 -->


@@ -15,7 +20,7 @@


          <div class="menuIcon imgBox">


            <img :src="item.icon" />


          </div>


          <p>{{ item.name }}</p>


          <div class="name">{{ item.name }}</div>


        </div>


        <div class="reload hover" @click="reload()">刷新</div>


        <!-- 设置 -->


@@ -50,19 +55,25 @@


          </div>


          <div v-else class="resourceTab">


            <div class="tabItem hover" @click="selectResourceType('default')">


              <p>默认资源</p>


              <div>默认资源</div>


              <div :class="resourceType == 'default' ? 'text' : 'line'"></div>


            </div>


            <hr class="hr" />


            <div class="tabItem hover" @click="selectResourceType('teacher')">


              <p>教师资源</p>


              <div>教师资源</div>


              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>


            </div>


          </div>


        </div>


        <!-- 目录 -->


        <div class="menuList" v-if="activeMenu == 0">


          <front006 />


          <el-tree


            style="max-width: 600px"


            default-expand-all="true"


            :data="catalogueData"


            :props="defaultProps"


            @node-click="handleNodeClick"


          />


        </div>


        <!-- 笔记 -->


        <div class="notesBox" v-if="activeMenu == 1">


@@ -83,38 +94,32 @@


              ></div>


            </div>


          </div>


          <div class="list-box">


          <div class="list-box" v-loading="scribeData.loading">


            <div v-if="scribeData.noteList.length > 0 && !scribeData.loading">


              <div


                v-for="(item, index) in scribeData.noteList"


                :key="item.key"


                class="listItem hover"


                @mouseenter="showDeleteBox(item, 'note')"


                @mouseleave="handleDeleteBox(item, 'note')"


              >


              <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem">


                <div class="itemBox noteStyle">


                  <!-- <div class="flex ai-c jc-sb">


                      <span class="createDate">{{ item.createDate }}</span>


                    </div> -->


                  <div class="textBox">


                    <div class="chapter">


                      <span>{{ item.name }}</span


                      ><span class="chapterName">{{ item.chapter }}</span>


                    <div class="title">


                      <div class="title-con">


                        <div class="round" :style="{ background: item.color }"></div>


                        <span>{{ item.name }}</span>


                      </div>


                      <div>


                        <el-icon size="18" color="#0093ff" @click="jumpContent('note' + index)"


                          ><LocationInformation


                        /></el-icon>


                        <img :src="bianji" @click="update(item, 'note')" />


                        <img :src="shanchu" @click="deleteBtn(item, 'note')" />


                      </div>


                    </div>


                    <!-- <div class="textConNote flex">


                      <div class="border"></div>


                      <div class="text">{{ item.selectText }}</div>


                    </div> -->


                    <div class="noteText flex">


                      <!-- <div class="label">笔记:</div> -->


                    <div class="noteText">


                      <div class="con">{{ item.note }}</div>


                    </div>


                    <div class="chapter">


                      <span class="createDate">{{ item.createDate }}</span>


                      <span class="chapterName">{{ item.chapter }}</span>


                    </div>


                  </div>


                </div>


                <div class="deleteBox" v-show="item.deleteBox" @click="deleteBtn(item, 'note')">


                  <span


                    ><el-icon> <Delete /> </el-icon><span>删除</span></span


                  >


                </div>


              </div>


            </div>


@@ -126,7 +131,29 @@


        <!-- 资源 -->


        <div class="" v-if="activeMenu == 2">


          <div class="resourceBox">


            <div class="inputBox">


            <div class="classification">


              <div


                v-for="item in classifySelectList"


                :key="item.key"


                class="flex1 hover"


                @click="classifyClick(item)"


              >


                <div


                  :class="


                    item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem'


                  "


                >


                  <div class="title">{{ item.title }}</div>


                  <div class="count">{{ item.count }}</div>


                </div>


              </div>


              <div class="showSearch flex1 hover">


                <div :class="searchShow ? 'imgBox' : 'imgBox activeSearch'" @click="searchBtn">


                  <img :src="searchShow ? search : search1" />


                </div>


              </div>


            </div>


            <div class="inputBox" v-if="!searchShow">


              <el-input class="custom-input" placeholder="请输入内容" v-model="searchText">


                <template #prefix>


                  <el-icon @click="searchBook"><Search /></el-icon>


@@ -135,7 +162,19 @@


            </div>


          </div>


          <div class="list-box">


            <div>


            <div v-if="resourceData.length > 0" class="resourceList">


              <el-row :gutter="20">


                <el-col :span="12" v-for="(item, index) in resourceData" :key="item">


                  <div class="resourceItem hover">


                    <div class="resourceImg">


                      <img :src="video" mode="" />


                    </div>


                    <div class="rName" @click="goResourceDetail(item)">{{ item.name }}</div>


                  </div>


                </el-col>


              </el-row>


            </div>


            <div v-else>


              <el-empty :image-size="60" description="暂无数据" />


            </div>


          </div>


@@ -151,7 +190,17 @@


        <!-- 截图 -->


        <div class="" v-if="activeMenu == 4">


          <div class="list-box">


            <div>


            <div class="screenshot" v-if="screenshotList.length > 0">


              <div


                v-for="(item, index) in screenshotList"


                :key="item"


                class="captureItem"


                @click="getCapture(item)"


              >


                <img :src="item.imgUrl" class="capture" mode="aspectFill" />


              </div>


            </div>


            <div v-else>


              <el-empty :image-size="60" description="暂无数据" />


            </div>


          </div>


@@ -177,7 +226,10 @@


            <div class="qureIcon"></div>


            <div class="">已上课：{{ headerData.classTime }}</div>


          </div>


          <div class="progress">{{ headerData.process }}</div>


          <div class="progress">


            <div class="bookName">学前儿童卫生与保健（第三版）</div>


            <div>{{ headerData.process }}%</div>


          </div>


          <div class="rightBox">


            <div class="pageSizeBox">


              <div><img :src="zoomIn" @click="changePageSize('add')" /></div>


@@ -190,18 +242,18 @@


          </div>


        </div>


        <!-- 微应用盒子 -->


        <div class="pageBox-content">


          <div id="container" @mouseup="handleMouseUp"></div>


          <!-- 画笔画布 -->


          <div class="canvas-box">


            <canvas


              @mousedown="mousedown"


              @mousemove.stop.prevent="mousemove"


              @mouseup="mouseup"


              ref="canvas"


              width="100%"


              height="100%"


            ></canvas>


        <div class="pageBox-content" @scroll="pageScroll">


          <div class="content-box">


            <div


              id="container"


              @mousedown="handleMouseDown"


              @mousemove="handleMousemove"


              @mouseup="handleMouseUp"


            ></div>


            <!-- 画笔画布 -->


            <div class="canvas-box" v-show="canvasShow">


              <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas>


            </div>


          </div>


        </div>


      </div>


@@ -299,18 +351,16 @@


              <div class="brush" v-if="floatingToolData.activeToolData == '画笔'">


                <div class="thickness">


                  <div


                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"


                    @click="selectThickness('small')"


                    :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'"


                    @click="selectThickness('1')"


                  ></div>


                  <div


                    :class="


                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'


                    "


                    @click="selectThickness('middle')"


                    :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'"


                    @click="selectThickness('3')"


                  ></div>


                  <div


                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"


                    @click="selectThickness('large')"


                    :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'"


                    @click="selectThickness('5')"


                  ></div>


                </div>


                <div class="lineStyle">


@@ -367,21 +417,25 @@


                </div>


              </div>


              <div class="write" v-if="floatingToolData.activeToolData == '文字'">


                <div class="thickness">


                <div class="characters">


                  <div


                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"


                    @click="selectThickness('small')"


                  ></div>


                    :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"


                    @click="selectfontSize('14')"


                  >


                    小


                  </div>


                  <div


                    :class="


                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'


                    "


                    @click="selectThickness('middle')"


                  ></div>


                    :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'"


                    @click="selectfontSize('16')"


                  >


                    中


                  </div>


                  <div


                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"


                    @click="selectThickness('large')"


                  ></div>


                    :class="floatingToolData.fontSizeActive == '18' ? 'large active' : 'large'"


                    @click="selectfontSize('18')"


                  >


                    大


                  </div>


                </div>


                <div class="lineStyle">


                  <div class="colorSelectBox">


@@ -416,7 +470,7 @@


              </div>


            </template>


          </el-popover>


          <div class="floatToolItem" v-else>


          <div class="floatToolItem" v-else @click="floatItemHandle(item)">


            <img :src="item.icon" alt="" />


            <div class="text">{{ item.name }}</div>


          </div>


@@ -431,7 +485,7 @@


      >


        <div


          class="colorSelectBox"


          v-if="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'"


          v-show="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'"


        >


          <div


            v-for="item in colorSelectList"


@@ -460,6 +514,14 @@


      </div>


    </div>


  </div>


  <el-dialog title="资源" align-center v-model="resourVisble" width="840">


    <div class="videoBox" v-if="resourType == 'video'">


      <video controls object-fit="fill" :src="testVideo"></video>


    </div>


    <div class="wordBox" v-if="resourType == 'word'">


      <vue-office-docx :src="testWord" />


    </div>


  </el-dialog>


  <el-dialog


    title="添加笔记"


    align-center


@@ -483,6 +545,17 @@


        <el-button type="primary" @click="addNote">确 定</el-button>


      </span>


    </template>


  </el-dialog>


  <el-dialog


    align-center


    v-model="confirmDialog"


    width="60%"


    :closeOnClickModal="false"


    title="图片"


  >


    <div class="imgUrlBox">


      <img :src="imgUrl" mode="aspectFill" />


    </div>


  </el-dialog>


  <el-dialog title="AI智能问答" align-center v-model="wendaVisible" width="26%" class="myDialogs">


    <div class="wendabox">


@@ -528,7 +601,7 @@


//获取当前路由的信息


let $route = useRoute()


import moment from 'moment'


import { ElMessage } from 'element-plus'


import { ElMessage, ElMessageBox } from 'element-plus'


import mulu from '@/assets/images/menu/mulu.png'


import biji from '@/assets/images/menu/biji.png'


import ziyuan from '@/assets/images/menu/ziyuan.png'


@@ -537,6 +610,8 @@


import biaoqian from '@/assets/images/menu/biaoqian.png'


import topbg from '@/assets/images/header/top-bg.png'


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 aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'


import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'


@@ -598,14 +673,125 @@


import zoomIn from '../assets/images/operation/zoomIn.png'


import zoomOut from '../assets/images/operation/zoomOut.png'


import huabi2 from '../assets/images/operation/huabi.svg'


import front006 from '@/views/components/front006.vue'




import shanchu from '../assets/images/operation/delete.png'


import bianji from '../assets/images/operation/bianji.png'


import video from '../assets/images/content/resource.png'


//引入VueOfficeDocx组件


import VueOfficeDocx from '@vue-office/docx'


//引入相关样式


import '@vue-office/docx/lib/index.css'


//截屏


import ScreenShort from 'js-web-screen-shot'


import { start } from 'qiankun'


import axios from 'axios'


import { fabric } from 'fabric'


const canvasWith = ref(1000)


const canvasheight = ref(3000)




onMounted(() => {


  // canvasWith.value = window.innerWidth - 540


  // canvasheight.value = window.innerHeight - 110


  getNotesList() // 获取高亮


  getlineHeightList() //获取高亮


  getScribeList() //获取划线


  getCatalogueData()


  getResourceData()


  getScreenshotList()


  // setTimeout(() => {


  //   canvasWith.value = document.getElementById('container').offsetWidth


  //   canvasheight.value = document.getElementById('container').offsetHeight


  // }, 5000)


})


//获取目录


const catalogueData = ref([])


const getCatalogueData = () => {


  axios


    .get('http://182.92.203.7:3007/books/test/information.json')


    .then(function (response) {


      var json = response.data


      // 处理获取到的json数据


      catalogueData.value = json


    })


    .catch(function (error) {


      console.log(error)


    })


}


const defaultProps = {


  children: 'children',


  label: 'label'


}


const handleNodeClick = (data) => {


  console.log(data.id, 12)


  document.getElementById(data.id).scrollIntoView()


}




//获取资源


//资源分类


const classifySelectList = reactive([


  {


    title: '图片',


    count: 0,


    key: 'image'


  },


  {


    title: '音频',


    count: 0,


    key: 'audio'


  },


  {


    title: '视频',


    count: 0,


    key: 'video'


  },


  {


    title: '其他',


    count: 0,


    key: 'other'


  }


])


const activeClassify = ref('image')


const searchShow = ref(false)


const resourceData = ref([])


const resourVisble = ref(false)


const resourType = ref('')


const testVideo = ref('') //视频链接


const testWord = ref('') //word链接


const getResourceData = () => {


  axios


    .get('http://182.92.203.7:3007/books/test/resource.json')


    .then(function (response) {


      var json = response.data


      // 处理获取到的json数据


      console.log(json, '资源')


      resourceData.value = json


    })


    .catch(function (error) {


      console.log(error)


    })


}




const goResourceDetail = (data) => {


  console.log(data, 23)


  resourVisble.value = true


  resourType.value = data.type


  if (data.type == 'video') {


    testVideo.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name


  } else if (data.type == 'word') {


    testWord.value = 'http://182.92.203.7:3007/books/test/resourceData/' + data.name


  }


}




const classifyClick = (item) => {


  activeClassify.value = item.key


}


const searchBtn = () => {


  if (searchShow.value) {


    searchShow.value = false


  } else {


    searchShow.value = true


  }


}


// 菜单


const menuData = reactive([


  {


@@ -642,6 +828,21 @@


const menuItemClick = (index) => {


  activeMenu.value = index


  menuState.open = true


  switch (index) {


    case '0':


      break


    case '1':


      getNotesList()


      break


    case '2':


      break


    case '3':


      break


    case '4':


      break


    case '5':


      break


  }


}


//刷新当前页面


const reload = () => {


@@ -668,6 +869,7 @@


  } else {


    menuState.notesColor = 'all'


  }


  getNotesList()


}


const searchBook = async () => {


  if (activeMenu.value == 1) {


@@ -680,10 +882,6 @@


  {


    name: 'AI智能问答',


    icon: aIzhinengwenda


  },


  {


    name: 'AI语音阅读',


    icon: aIyuyinyuedu


  },


  {


    name: '词典',


@@ -812,23 +1010,21 @@


    name: '截屏'


  }


])




const canvas = ref(null)


const floatingToolData = reactive({


  activeToolData: '', //选中工具


  elLeft: 380,


  elTop: 300,


  startclientx: 0,


  startclienty: 0,


  thicknessActive: 'middle', //画笔选中粗细


  fontSizeActive: '16',


  thicknessActive: '3', //画笔选中粗细


  lineTypeActive: 'solid', //画笔选中线类型


  lineColorActive: '' //画笔选中线颜色


  lineColorActive: '#333' //画笔选中线颜色


})




//画布


const canvas = ref<any>() //获取画布


let ctx: CanvasRenderingContext2D //获取canvas操作api的入口的类型


let painting = false


let key = 1


const canvasShow = ref(false)




const floatOverHander = (item) => {


  const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)


@@ -882,13 +1078,26 @@


      break


  }


}




//截图事件


const nameRef = ref()


const imgUrl = ref()


const confirmDialog = ref<Boolean>(false)


const nameData = ref({ name: '' })


const screenshotList = ref([])




//浮窗工具栏点击事件


const floatItemHandle = (item) => {


  floatingToolData.activeToolData = item.name


  // switch (item.name) {


  //   case '画笔':


  //     break


  // }


  switch (item.name) {


    case '画笔':


      canvasShow.value = true


      init()


      break


    case '截屏':


      jitT()


      break


  }


}


const dragend = (e) => {


  let x = e.clientX - floatingToolData.startclientx


@@ -907,64 +1116,105 @@


//选中画笔粗细


const selectThickness = (str) => {


  floatingToolData.thicknessActive = str


  init()


}




const selectLineType = (str) => {


  floatingToolData.lineTypeActive = str


  init()


}


//画笔颜色选择


const lineColorSelect = (item) => {


  floatingToolData.lineColorActive = item.key


  init()


}


// 画线段


const paint = (


  startX: number,


  startY: number,


  endX: number,


  endY: number,


  ctx: CanvasRenderingContext2D


) => {


  ctx.beginPath()


  ctx.globalAlpha = 1


  ctx.lineWidth = 2


  ctx.strokeStyle = '#000'


  ctx.moveTo(startX, startY) // 画线起点


  ctx.lineTo(endX, endY) // 画线终点


  ctx.closePath()


  ctx.stroke() // 描绘线条


}


// 定义鼠标初始点击的位置


let startX = 0


let startY = 0




// 鼠标按下


const mousedown = (event: MouseEvent) => {


  ;[startX, startY] = getOffset(event)


  painting = true // 将绘画状态改成true


}




// 鼠标移动


const mousemove = (event: MouseEvent) => {


  if (painting) {


    // 在鼠标移动的期间，获取鼠标的位置


    const [endX, endY] = getOffset(event)


    paint(startX, startY, endX, endY, ctx)


    // 下面两行代码是更新线条的起点


    startX = endX


    startY = endY


  }


}




// 鼠标松开


const mouseup = (event: MouseEvent) => {


  // 松开鼠标后 禁止画线条


  if (painting) painting = false


//画布属性


const init = () => {


  canvas.value = new fabric.Canvas('canvasRef', {


    isDrawingMode: true // 启用绘画模式


  })


  canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive


  canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive


}




//清除上一步/全部


const cleanUpSelect = (str) => {}


const cleanUpSelect = (str) => {


  if (str == 'all') {


    canvasShow.value = false


  } else {


    console.log(history.value)


  }


}


//标签显示隐藏


const labelShow = (str) => {}




//文字大小


const selectfontSize = (str) => {


  floatingToolData.fontSizeActive = str


}




//截图


//截图事件


function jitT() {


  const screenShotHandler = new ScreenShort({


    enableWebRtc: false, // 是否显示选项框


    level: 99, // 层级级别


    completeCallback: callback, //确认回调


    closeCallback: closeFn //取消回调


  } as any)


}


//确认回调


const callback = (val: any) => {


  ElMessageBox.confirm('确认要保存截图?', '提示', {


    confirmButtonText: '确认',


    cancelButtonText: '取消'


  })


    .then(() => {


      screenshotList.value.push({


        createDate: new Date(),


        imgUrl: val.base64


      })


      request({


        url: '/identity/api/ApiAppUserSetKey',


        method: 'post',


        data: {


          setKeyRequests: [


            {


              domain: 'screenshot',


              key: '1',


              value: JSON.stringify(screenshotList.value)


            }


          ]


        }


      }).then((res) => {


        getScreenshotList()


      })


    })


    .catch(() => {})


}


//取消回调


const closeFn = (base64: any) => {


  console.log(base64)


}




const getScreenshotList = () => {


  request({


    url: '/identity/api/ApiGetAppUserKey',


    method: 'post',


    data: {


      domain: 'screenshot',


      keys: ['1']


    }


  }).then((res) => {


    if (res && res.length > 0 && res[0].value) {


      screenshotList.value = JSON.parse(res[0].value)


    }


  })


}


const getCapture = (item) => {


  imgUrl.value = item.imgUrl


  confirmDialog.value = true


}




//选中文字工具栏


const selectText = ref('') //选中文字


@@ -974,32 +1224,53 @@


  left: 500,


  top: 300,


  chapter: '', //选中文字所在章节


  parentNode: null,


  lineHeight: [], //高亮


  scribeList: [], //划线


  notesList: [] //笔记


})




//调用子应用文字选中事件


// const subApp = start()


// subApp.handleMouseUp()




//选中文字


const handleMouseUp = (e) => {


  const txt = window.getSelection()?.toString()


  selectText.value = txt


  const node = window.getSelection()


  console.log(node, 'temp_node')


  let html = node.baseNode.parentNode.parentNode


  dialogToolData.chapter = html.firstChild.innerHTML


  console.log(dialogToolData.chapter)


  selectNode.value = node


  if (txt) {


    showToolBox.value = true


    dialogToolData.top = e.y


    dialogToolData.left = e.x


///内容选中


const isMouseDown = ref(false)


const move = ref(false)


const handleMouseDown = () => {


  isMouseDown.value = true


  showToolBox.value = false


  colorActive.value = ''


  toolActive.value = ''


}


const handleMousemove = () => {


  if (isMouseDown.value) {


    move.value = true


  }


}


const toolActive = ref('高亮')




const handleMouseUp = (e) => {


  if (move.value) {


    const txt = window.getSelection()?.toString()


    selectText.value = txt


    const node = window.getSelection()


    let html = node.anchorNode.parentNode.parentNode


    dialogToolData.chapter = html.firstChild.innerHTML


    console.log(dialogToolData.chapter)


    if (txt) {


      showToolBox.value = true


      dialogToolData.top = e.y


      dialogToolData.left = e.x


    }


    isMouseDown.value = false


  }


  move.value = false


}




const pageScroll = (e) => {


  showToolBox.value = false


  let scroll = e.target.scrollTop


  let offsetHeight = document.getElementById('container').offsetHeight


  headerData.process = Math.round((scroll / offsetHeight) * 100)


}




const toolActive = ref('')


const colorActive = ref('')


const dialogToolList = reactive([


  { icon: gaoliang, activeIcon: gaoliang1, name: '高亮' },


@@ -1007,30 +1278,31 @@


  { icon: biji2, activeIcon: biji1, name: '笔记' },


  { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' },


  { icon: fuzhi, activeIcon: fuzhi1, name: '复制' },


  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' },


  { icon: cidian2, activeIcon: cidian1, name: '词典' },


  { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }


  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' }


  // { icon: cidian2, activeIcon: cidian1, name: '词典' },


  // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }


  // { icon: cidian2, activeIcon: cidian1, name: '翻译' }


])


const colorSelectList = reactive([


  {


    label: '红色',


    key: '#FF0000'


  },


  {


    label: '蓝色',


    key: '#004DFF'


    label: '黄色',


    key: '#F5E12A'


  },


  {


    label: '绿色',


    key: '#01BA51'


    key: '#76F0AE'


  },


  {


    label: '黄色',


    key: '#FFF700'


    label: '蓝色',


    key: '#59CFF5'


  },


  {


    label: '澄色',


    key: '#FF8800'


    label: '紫色',


    key: '#CAA5FC '


  },


  {


    label: '粉色',


    key: '#F5A0B9'


  }


])




@@ -1049,6 +1321,7 @@




//笔记，高亮，划线


const scribeData = reactive({


  loading: false,


  scribeDataList: [], //划线菜单列表


  lineHeightList: [], //高亮菜单列表


  noteList: [] //笔记菜单列表


@@ -1058,6 +1331,7 @@


const synth = window.speechSynthesis


//工具栏方法


const dialogOverHander = (item) => {


  // toolActive.value = item.name


  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)


  switch (curIndex) {


    case 0:


@@ -1088,6 +1362,7 @@


}


const dialogOutHander = (item) => {


  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)




  switch (curIndex) {


    case 0:


      dialogToolList[0].icon = gaoliang


@@ -1147,7 +1422,7 @@


        ElMessage.error('无法复制文本：' + err)


      }


      showToolBox.value = false


      toolActive.value = '高亮'


      toolActive.value = ''


      break


    case '词典':


      cidianVisible.value = true


@@ -1161,20 +1436,6 @@


    addNoteVisble.value = true


  }


  if (toolActive.value == '高亮') {


    let heightLightElement = document.createElement("i");


        heightLightElement.style.backgroundColor = colorActive.value;


        heightLightElement.innerText = selectText.value;


        let rReg = new RegExp(`${selectText.value}`, "ig");


        console.log(selectNode.value)


        let textDom = selectNode.value.anchorNode.parentNode;


        console.log(textDom)


        let text = textDom.innerHTML;


        let rHtml = "";


        rHtml = text.replace(


          rReg,


          `<span style="background: ${colorActive.value};">${selectText.value}</span>`


        );


        textDom.innerHTML = rHtml;


    dialogToolData.lineHeight.push({


      selectNode: selectNode.value,


      selectText: selectText.value,


@@ -1191,18 +1452,15 @@


          {


            domain: 'highLight',


            key: '1',


            value: JSON.stringify(dialogToolData.lineHeight)


            value: JSON.stringify([dialogToolData.lineHeight])


          }


        ]


      }


    }).then((res) => {


      showToolBox.value = false


      colorActive.value = ''


      toolActive.value = '高亮'


      toolActive.value = ''


      getlineHeightList()


      setTimeout(() => {


        lock.value = false


      }, 1000)


    })


  }


  if (toolActive.value == '划线') {


@@ -1229,11 +1487,8 @@


    }).then((res) => {


      colorActive.value = ''


      showToolBox.value = false


      toolActive.value = '高亮'


      toolActive.value = ''


      getScribeList()


      setTimeout(() => {


        lock.value = false


      }, 1000)


    })


  }


}


@@ -1249,7 +1504,6 @@


    if (formData.desc.replace(/^\s*|\s*$/g, '')) {


      if (formData.name.replace(/^\s*|\s*$/g, '')) {


        dialogToolData.notesList.push({


          selectNode: selectNode.value,


          selectText: selectText.value,


          color: colorActive.value,


          chapter: dialogToolData.chapter,


@@ -1273,8 +1527,8 @@


          showToolBox.value = false


          addNoteVisble.value = false


          colorActive.value = ''


          toolActive.value = '高亮'


          getNotesList()


          toolActive.value = ''


          // getNotesList()


          setTimeout(() => {


            lock.value = false


          }, 1000)


@@ -1292,6 +1546,7 @@


//笔记


const getNotesList = () => {


  scribeData.noteList = []


  scribeData.loading = true


  request({


    url: '/identity/api/ApiGetAppUserKey',


    method: 'post',


@@ -1303,28 +1558,43 @@


    if (res && res.length > 0 && res[0].value) {


      dialogToolData.notesList = JSON.parse(res[0].value)


      let list = JSON.parse(res[0].value)


      list.forEach((item) => {


        item.createDate = moment(item.createDate).format('YYYY-MM-DD')


        if (searchText.value) {


          searchText.value = searchText.value.replace(/^\s*|\s*$/g, '')


          let text = searchText.value.replace(/^\s*|\s*$/g, '')


          if (item.text.indexOf(text) > -1) {


      let textDom1 = document.getElementById('container')


      console.log(list, '笔记')


      if (list.length > 0) {


        list.forEach((item, index) => {


          item.createDate = moment(item.createDate).format('YYYY-MM-DD')


          if (searchText.value) {


            searchText.value = searchText.value.replace(/^\s*|\s*$/g, '')


            let text = searchText.value.replace(/^\s*|\s*$/g, '')


            if (item.text.indexOf(text) > -1) {


              if (menuState.notesColor == 'all') {


                scribeData.noteList.push(item)


              } else if (menuState.notesColor == item.color) {


                scribeData.noteList.push(item)


              }


            }


          } else {


            if (menuState.notesColor == 'all') {


              scribeData.noteList.push(item)


            } else if (menuState.notesColor == item.color) {


              scribeData.noteList.push(item)


            }


          }


        } else {


          if (menuState.notesColor == 'all') {


            scribeData.noteList.push(item)


          } else if (menuState.notesColor == item.color) {


            scribeData.noteList.push(item)


          }


        }


      })




      console.log(scribeData.noteList)


          //页面添加笔记


          let containerElement = document.createElement('span')


          containerElement.style.textDecoration = 'underline'


          containerElement.innerText = item.selectText


          let rReg1 = new RegExp(`${item.selectText}`, 'ig')


          let text1 = textDom1.innerHTML


          let rHtml1 = ''


          rHtml1 = text1.replace(


            rReg1,


            `<span style="text-decoration:underline;text-underline-thickness:2px;text-underline-offset:4px;text-decoration-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`


          )


          textDom1.innerHTML = rHtml1


        })


      }


      scribeData.loading = false


    }


  })


}


@@ -1342,6 +1612,24 @@


    if (res && res.length > 0 && res[0].value) {


      dialogToolData.scribeList = JSON.parse(res[0].value)


      scribeData.scribeDataList = JSON.parse(res[0].value)


      let textDom1 = document.getElementById('container')


      console.log(scribeData.scribeDataList, '划线')


      if (scribeData.scribeDataList.length > 0) {


        for (let i = 0; i < scribeData.scribeDataList.length; i++) {


          let item = scribeData.scribeDataList[i]


          let containerElement = document.createElement('span')


          containerElement.style.textDecoration = 'underline'


          containerElement.innerText = item.selectText


          let rReg1 = new RegExp(`${item.selectText}`, 'ig')


          let text1 = textDom1.innerHTML


          let rHtml1 = ''


          rHtml1 = text1.replace(


            rReg1,


            `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span>`


          )


          textDom1.innerHTML = rHtml1


        }


      }


    }


  })


}


@@ -1359,53 +1647,116 @@


    if (res && res.length > 0 && res[0].value) {


      dialogToolData.lineHeight = JSON.parse(res[0].value)


      scribeData.lineHeightList = JSON.parse(res[0].value)


      console.log(scribeData.lineHeightList, '高亮')


      let textDom = document.getElementById('container')


      if (scribeData.lineHeightList.length > 0) {


        for (let i = 0; i < scribeData.lineHeightList.length; i++) {


          let item = scribeData.lineHeightList[i]


          let heightLightElement = document.createElement('i')


          heightLightElement.style.backgroundColor = item.color


          heightLightElement.innerText = item.selectText


          let rReg = new RegExp(`${item.selectText}`, 'ig')


          let text = textDom.innerHTML


          let rHtml = ''


          rHtml = text.replace(


            rReg,


            `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>`


          )


          textDom.innerHTML = rHtml


        }


      }


    }


  })


}




//删除高亮/划线


//鼠标移入显示删除按钮


const showDeleteBox = (item, type) => {


  if (type == 'note') {


    if (item.deleteBox == false) {


      scribeData.noteList.forEach((i) => {


        i.deleteBox = false


      })


      item.deleteBox = true


//正文中删除高亮，划线，笔记操作框


window.notesVisbleShow = function (txt) {


  addNoteVisble.value = true


  let notes = dialogToolData.notesList.find((item) => item.selectText == txt)


  formData.name = notes.name


  formData.desc = notes.note


}


window.deleteScribeShow = function (txt) {


  console.log(txt, 2)


  let list = scribeData.scribeDataList.filter((item) => item.selectText != txt)


  request({


    url: '/identity/api/ApiAppUserSetKey',


    method: 'post',


    data: {


      setKeyRequests: [


        {


          domain: 'underline',


          key: '1',


          value: JSON.stringify(list)


        }


      ]


    }


  }


  }).then((res) => {


    getScribeList()


  })


}


//鼠标移出


const handleDeleteBox = (item) => {


  item.deleteBox = false




window.deletelineHeightShow = function (txt) {


  console.log(txt, 1)


  let list = scribeData.lineHeightList.filter((item) => item.selectText != txt)


  request({


    url: '/identity/api/ApiAppUserSetKey',


    method: 'post',


    data: {


      setKeyRequests: [


        {


          domain: 'highLight',


          key: '1',


          value: JSON.stringify(list)


        }


      ]


    }


  }).then((res) => {


    getlineHeightList()


  })


}




const jumpContent = (id) => {


  document.getElementById(id).scrollIntoView()


}




const update = (item, type) => {


  dialogToolData.notesList.splice(


    dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText),


    1


  )


  selectText.value = item.selectText


  colorActive.value = item.color


  dialogToolData.chapter = item.chapter


  formData.name = item.name


  formData.desc = item.note


  addNoteVisble.value = true


}




//删除


const deleteBtn = (item, type) => {


  if (type == 'note') {


    // 移除


    let index = scribeData.noteList.findIndex((itemData) => itemData.text == item.text)


    if (index > -1) {


      scribeData.noteList.splice(index, 1)


      request({


        url: '/identity/api/ApiAppUserSetKey',


        method: 'post',


        data: {


          setKeyRequests: [


            {


              domain: 'notes',


              key: '1',


              value: JSON.stringify(scribeData.noteList)


            }


          ]


        }


      }).then((res) => {


        ElMessage({


          message: '删除笔记成功!',


          type: 'success'


        })


        getNotesList()


    let list = scribeData.noteList.filter((itemData) => itemData.selectText !== item.selectText)


    request({


      url: '/identity/api/ApiAppUserSetKey',


      method: 'post',


      data: {


        setKeyRequests: [


          {


            domain: 'notes',


            key: '1',


            value: JSON.stringify(list)


          }


        ]


      }


    }).then((res) => {


      ElMessage({


        message: '删除笔记成功!',


        type: 'success'


      })


    }


      getNotesList()


    })


  }


}




@@ -1416,7 +1767,7 @@


  seconds: 0,


  minutes: 0,


  hours: 0,


  process: '42%',


  process: 0,


  pageSize: 100


})


//上课时长计时器


@@ -1460,20 +1811,38 @@


.homeBox {


  width: 100%;


  height: 100%;


  background:#C6C6C6;


  border-radius: 10px;


  display: flex;


  flex-direction: column;


  padding:0 15px;


  .headerBox {


    height: 48px;


    background-image: url('@/assets/images/header/top-bg.png');


    // background-image: url('@/assets/images/header/top-bg.png');


    background-size: 100% 100%;


    background-repeat: no-repeat;


    padding: 0 20px;


    line-height: 48px;


    display:flex;


    justify-content: space-between;


    p {


      font-size: 24px;


      color: #ffffff;


      letter-spacing: 2px;


      font-weight: bold;


    }


    .userInfoBox{


      display:flex;


      align-items: center;


      .layout{


        width: 69px;


        height: 30px;


        background: #0093FF;


        border-radius: 15px;


        color:#fff;


        text-align:center;


        line-height:30px;




      }


    }


  }


  .contentBox {


@@ -1482,19 +1851,25 @@


    display: flex;


    .menuBox {


      width: 80px;


      flex-shrink: 0;


      border-right: 1px solid #e6e7e8;


      padding-bottom: 20px;


      box-sizing: border-box;


      position: relative;


      box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07);


      background:#fff;


      border-radius:16px 0px 0px 0px;


      .menuItem {


        text-align: center;


        line-height: 1;


        cursor: pointer;


        padding: 10px 0;


        padding: 5px 0 10px 0;


        width:63px;


        margin: 10px auto;


        border-radius: 10px;


        &.active,


        &:hover {


          background-color: #cfebff;


          background-color: rgba(0, 147, 255, 0.1);


          p {


            color: #0093ff;


          }


@@ -1503,7 +1878,10 @@


          display: inline-block;


          width: 32px;


          height: 32px;


          margin-bottom: 4px;


          .name {


            text-align: center;


            line-height: 1;


          }


        }


      }


      .reload {


@@ -1520,7 +1898,8 @@


      }


    }


    .menuContent {


      width: 270px;


      width: 300px;


      flex-shrink: 0;


      height: calc(100vh - 48px);


      overflow-y: auto;


      background: #e0f2ff;


@@ -1533,11 +1912,54 @@


        align-items: center;


      }


      .resourceBox {


        width: 100%;


        height: 60px;


        display: flex;


        justify-content: center;


        align-items: center;


        padding: 15px 0;


        margin: 0 20px;


        border-bottom: 1px solid rgba(204, 204, 204, 0.32);


        .classification {


          width: 100%;


          display: flex;


          justify-content: space-between;


          align-items: center;


          .flex1 {


            flex: 1;


            text-align: center;


          }


          .title {


            color: #999999;


          }


          .count {


            width: 35px;


            margin: 5px auto;


            border-radius: 10px;


            background: #fff;


            color: #c8c8c8;


          }


          .activeClassify,


          .classifyItem:hover {


            .title {


              color: #0093ff;


            }


            .count {


              background: #0093ff;


              color: #fff;


            }


          }


          .showSearch {


            .imgBox {


              width: 39px;


              height: 24px;


              border-radius: 16px;


              margin: 0 auto;


            }


            .imgBox:hover,


            .activeSearch {


              border: 1px solid #0093ff;


            }


          }


        }


        .inputBox {


          margin-top: 10px;


        }


      }


      .resourceTab {


        width: 100%;


@@ -1574,6 +1996,7 @@


          border: 1px solid #0093ff !important;


          border-radius: 50px;


          overflow: hidden;


          background:#fff;


        }


        .is-focus,


        .el-input__wrapper {


@@ -1640,21 +2063,93 @@


      .menuList {


        height: calc(100% - 60px);


        overflow-y: auto;


        padding: 10px;


        padding: 10px 0;


      }


      .list-box {


        .resourceList {


          padding: 10px;


          .resourceItem {


            padding: 10px 0;


            align-items: center;


            .resourceImg {


              width: 130px;


              height: 80px;


              background: #fff;


              border-radius:5px;


              overflow: hidden;


              img {


                height: 100%;


                width: 100%;


                object-fit: contain;


              }


            }




            .rName {


              margin-top:10px;


              height: 20px;


              line-height: 20px;


              display: -webkit-box;


              -webkit-box-orient: vertical;


              -webkit-line-clamp: 1;


              overflow: hidden;


              text-overflow: ellipsis;


              color: #000;


            }


          }


        }


        .screenshot {


          padding: 20px;


          display: flex;


          flex-wrap: wrap;


          justify-content: space-between;


          .captureItem {


            border: 1px solid #d8d8d8;


            margin-bottom: 10px;


            width: 46%;


            .capture {


              width: 100%;


              height: 80px;


            }


          }


        }




        .listItem {


          border-bottom: 1px solid rgba(212, 212, 212, 0.16);


          position: relative;


          padding: 10px;


          margin: 10px;


          line-height: 20px;


          .textBox {


            padding: 15px 10px;


            .chapter {


              color: #0093ff;


            padding: 0 5px 10px 5px;


            .title {


              display: flex;


              justify-content: space-between;


              align-items: center;


              .title-con {


                display: flex;


                align-items: center;


                .round {


                  width: 10px;


                  height: 10px;


                  border-radius: 50%;


                  margin-right: 5px;


                }


              }




              img {


                margin-left: 5px;


              }


            }


            .chapterName{


            .chapter {


              color: #b7b7b7;


              margin-top: 5px;


            }


            .chapterName {


              float: right;


              width: 150px;


              overflow: hidden;


              white-space: nowrap;


              text-overflow: ellipsis;


              text-align: right;


            }


          }


          .noteText {


@@ -1704,7 +2199,7 @@


      position: fixed;


      line-height: 22px;


      top: 50%;


      left: 325px;


      left: 370px;


      text-align: center;


      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);


      img {


@@ -1715,7 +2210,6 @@




    .pageBox {


      flex: 1;


      overflow: auto;


      font-size: 16px;


      .pageBox-header {


        height: 57px;


@@ -1738,6 +2232,14 @@


            background: #0093ff;


            margin: 0 5px;


          }


        }


        .progress{


          text-align:center;


          .bookName{


            font-weight:bold;


            margin-bottom:3px;


          }




        }


        .rightBox {


          display: flex;


@@ -1768,11 +2270,14 @@


      }


      .pageBox-content {


        height: calc(100% - 57px);


        position: relative;


        overflow-y: auto;


        background: #fbf9f4;


        .content-box {


          position: relative;


        }


        #container {


          background: #fbf9f4;


          height: 100%;


          // height: 100%;


        }


        .canvas-box {


          height: 100%;


@@ -1780,12 +2285,16 @@


          position: absolute;


          top: 0;


          left: 0;


          z-index: 96;


          background: rgba(255, 255, 255, 0.2);


        }


      }


    }


    .toolBox {


      position: relative;


      box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07);


      background:#fff;


      border-radius:0px 16px 0px 0px;


      .toolTitle {


        height: 57px;


        line-height: 53px;


@@ -1802,7 +2311,7 @@


      .menu {


        padding-top: 20px;


        li {


          height: 50px;


          // height: 50px;


          padding: 10px 36px;


          font-size: 16px;


          display: flex;


@@ -1825,10 +2334,10 @@


        background: #fff;


        border-radius: 3px 0px 0px 3px;


        border: 1px solid #bce3ff;


        position: fixed;


        position: absolute;


        line-height: 22px;


        top: 50%;


        right: 50px;


        right: 65px;


        text-align: center;


        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);


        img {


@@ -1837,7 +2346,7 @@


        }


      }


      .right {


        right: 183px !important;


        right: 174px !important;


        border-radius: 0px 3px 3px 0px !important;


      }


      .classRoomBox {


@@ -1904,11 +2413,10 @@


      width: 85px;


      background-image: linear-gradient(to bottom, #0093ff, #005dff);


      position: fixed;


      // height: 430px;


      height: 130px;


      height: 430px;


      top: 300px;


      left: 400px;


      z-index: 999;


      z-index: 99;


      border-radius: 10px;


      padding: 5px;


      overflow: hidden;


@@ -1927,9 +2435,7 @@


        }


      }


    }


    .draggableBox:hover {


      height: 430px;


    }




    .floatToolItem:hover {


      background-color: #fff;


      color: #0093ff;


@@ -2040,4 +2546,14 @@


    }


  }


}


.videoBox video {


  width: 100%;


}


.wordBox {


  height: 600px;


}


.imgUrlBox {


  width: 100%;


  text-align: center;


}


</style>