From e881af358017042209a076554c333bd5e58d1b68 Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期四, 30 五月 2024 09:19:16 +0800
Subject: [PATCH] 1
---
src/views/home.vue | 267 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 196 insertions(+), 71 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index 30ceec7..798cad6 100644
--- a/src/views/home.vue
+++ b/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%;
}
}
--
Gitblit v1.9.1