From ed307fc6a68cd6592589a4bafb7717c0fe7f74cd Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期四, 30 五月 2024 09:21:04 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/views/home.vue | 203 +++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 157 insertions(+), 46 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index c40000d..515ecca 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -313,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
@@ -418,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>
@@ -726,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
@@ -852,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'
@@ -862,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> -->
@@ -943,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">
@@ -1111,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'
@@ -1129,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'
@@ -1272,9 +1299,9 @@
console.log(data.bookConfig, '鍥句功閰嶇疆')
bookConfig.value = data.bookConfig
getCatalogueData()
- getResourceData()
+ // getResourceData()
getTextbookComponents()
- getReMarkList()
+ // getReMarkList()
},
catalogChange: (data) => {
activeCatalog.value = data.showCatalogList
@@ -1284,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))
@@ -1292,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
})
@@ -1556,7 +1584,7 @@
const defaultProps = {
children: 'children',
label: 'label',
- page: 'page'
+ start: 'start'
}
const filterNode = (value, data) => {
@@ -1599,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)
@@ -1618,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)
}
@@ -1651,7 +1691,7 @@
count: imgCount,
key: 'image'
})
- imgPreviewList.value = resourceDataList.value
+
}
if (audioCount > 0) {
classifySelectList.value.push({
@@ -1689,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
@@ -1698,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)
}
@@ -1731,7 +1797,6 @@
count: imgCount,
key: 'image'
})
- imgPreviewList.value = resourceDataList.value
}
if (audioCount > 0) {
classifySelectList.value.push({
@@ -1801,6 +1866,7 @@
//璧勬簮璺宠浆鍒版寚瀹氫綅缃�
const JumpPosition = (data) => {
+ console.log(data,"璺宠浆")
if (window.qiankunState && window.qiankunState.gotoPage) {
window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
}
@@ -1846,6 +1912,7 @@
getNotesList()
break
case '璧勬簮':
+ getResourceData()
break
case '鐭ヨ瘑鍥捐氨':
break
@@ -2196,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({
@@ -2219,7 +2295,7 @@
]
})
.then((res) => {
- floatingToolData.activeToolData = ''
+ // floatingToolData.activeToolData = ''
ElMessage({
message: '娣诲姞涔︾鎴愬姛!',
type: 'success'
@@ -2324,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
}
})
@@ -2535,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
@@ -2682,7 +2761,6 @@
// 娓叉煋
for (let j = 0; j < data.length; j++) {
const citem = data[j]
- console.log(citem.type, citem)
if (window.qiankunState && window.qiankunState.renderSign)
window.qiankunState.renderSign(citem.type, citem)
}
@@ -2703,10 +2781,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)
+ }
}
}
}
@@ -2724,10 +2804,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)
+ }
}
}
}
@@ -2817,6 +2899,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
@@ -2846,17 +2929,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
}
@@ -3005,6 +3088,15 @@
})
}
}
+
+//鍗曡瘝闃呰
+const soundWord = (word, en) => {
+ window.speechSynthesis.cancel()
+ const synth = window.speechSynthesis
+ const utterances = new SpeechSynthesisUtterance(word)
+ // utterances.lang = en // 璁剧疆璇█涓轰腑鏂�
+ synth.speak(utterances)
+}
//鍐呭鍖哄煙椤堕儴鏄剧ず
const headerData = reactive({
@@ -3143,11 +3235,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 {
@@ -3515,12 +3607,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;
@@ -3935,6 +4036,7 @@
}
}
.noteContentBox {
+ max-width: 240px;
position: fixed;
z-index: 2;
padding: 10px;
@@ -3947,10 +4049,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;
@@ -3962,8 +4068,13 @@
padding: 8px 10px;
span {
margin: 0 10px;
+ flex: 1;
}
}
+ .soundBtn {
+ width: 16px;
+ height: 14px;
+ }
}
.trans {
padding: 20px 0;
--
Gitblit v1.9.1