From dfb8100b149a8020005a08e63cbe3fc055b67e02 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期三, 15 五月 2024 11:22:06 +0800 Subject: [PATCH] zy --- src/views/home.vue | 446 ++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 277 insertions(+), 169 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 8bc92f8..a9106f2 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -171,7 +171,9 @@ : item.color }" > - <div class="con">{{ item.note }}</div> + <div class="con hover" @click="jumpContent('note' + index)"> + {{ item.note }} + </div> </div> <div class="chapter">{{ item.selectText }}</div> </div> @@ -221,10 +223,27 @@ <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> <div class="resourceItem hover" @click="goResourceDetail(item)"> <div class="resourceImg"> - <img :src="video" mode="" /> + <img :src="item.icon" mode="" v-if="item.icon" /> + <el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon> + <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> + <el-icon v-else-if="activeClassify == 'video'" size="30" + ><VideoCamera + /></el-icon> + <el-icon + v-else-if="activeClassify == 'other' && item.fileType == 'PDF'" + size="30" + ><Files + /></el-icon> + <el-icon + v-else-if="activeClassify == 'other' && item.fileType == ''" + size="30" + ><Tickets + /></el-icon> </div> <div class="rName" v-if="searchText != ''" v-html="item.name"></div> - <div class="rName" v-else>{{ item.name }}</div> + <div class="rName" v-else :title="item.resourceName"> + {{ item.resourceName }} + </div> </div> </el-col> </el-row> @@ -246,16 +265,19 @@ <div class="" v-if="activeMenu == 4"> <div class="list-box"> <div class="screenshot" v-if="screenshotList.length > 0"> - <div - v-for="(item, index) in screenshotList" - :key="item" - class="captureItem" - @click="getCapture(item)" - > + <div v-for="(item, index) in screenshotList" :key="item" class="captureItem"> <div class="imgBox"> - <img :src="item.imgUrl" class="capture" mode="aspectFill" /> + <img + :src="item.imgUrl" + class="capture" + mode="aspectFill" + @click="getCapture(item)" + /> + <div class="deleteBox hover" @click="deleteScreenshot(item, 'capture')"> + <img :src="shanchu" /> + </div> </div> - <div class="captureName">{{ item.name }}</div> + <div class="captureName" :title="item.name">{{ item.name }}</div> </div> </div> <div v-else> @@ -285,7 +307,7 @@ <div class="">宸蹭笂璇撅細{{ headerData.classTime }}</div> </div> <div class="progress"> - <div class="bookName">{{bookName}}</div> + <div class="bookName">{{ bookName }}</div> <div>{{ headerData.process }}%</div> </div> <div class="rightBox"> @@ -302,7 +324,12 @@ <!-- 寰簲鐢ㄧ洅瀛� --> <div class="pageBox-content" @scroll="pageScroll"> <div class="content-box"> - <div id="container" @mousedown="handleMouseDown" @mousemove="handleMousemove" ></div> + <div + id="container" + @mousedown="handleMouseDown" + @mousemove="handleMousemove" + :style="{ background: settingForm.bgColorActive }" + ></div> <!-- 鐢荤瑪鐢诲竷 --> <div class="canvas-box" v-show="canvasShow"> <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas> @@ -669,9 +696,18 @@ </div> </div> </div> + <!-- 鍒掔嚎锛岄珮浜垹闄� --> + <div + class="lineDeleteBox" + v-show="lineDelete.showLineDelete" + :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" + > + <el-button @click="lineDeleteBtn">鍒犻櫎</el-button> + </div> + <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog"> - <div class="videoBox" v-if="resourType == 'video'"> - <video controls object-fit="fill" :src="testVideo"></video> + <div class="videoBox" v-if="resourType == '瑙嗛'"> + <video controls controlslist="nodownload" :src="testVideo"></video> </div> <div class="wordBox" v-if="resourType == 'word'"> <vue-office-docx :src="testWord" /> @@ -729,7 +765,7 @@ v-model="screenshotVisble" :before-close="screenshotClose" width="400" - class="resourDialog" + class="resourDialog screenshotDialog" > <div class="formBox"> <el-input v-model="nameData" placeholder="璇疯緭鍏ユ埅鍥惧悕绉�"></el-input> @@ -781,8 +817,8 @@ </template> <script setup lang="ts"> -import { ref, reactive, watch, onMounted, onBeforeMount,inject } from 'vue' -import { ctxUrl,resourceUrl } from '@/assets/js/config' +import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' +import { ctxUrl, resourceUrl, requestCtx } from '@/assets/js/config' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() @@ -794,7 +830,7 @@ let route = useRoute() import moment from 'moment' import dictionary from '@/views/components/dictionary.vue' -import { ElMessage, ElMessageBox } from 'element-plus' +import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import logo from '@/assets/images/header/logo.png' import mulu from '@/assets/images/menu/mulu.png' import biji from '@/assets/images/menu/biji.png' @@ -899,14 +935,12 @@ const bookName = ref('') const bookId = ref(1) onMounted(() => { - // canvasWith.value = window.innerWidth - 540 - // canvasheight.value = window.innerHeight - 110 getCatalogueData() getResourceData() - // setTimeout(() => { - // canvasWith.value = document.getElementById('container').offsetWidth - // canvasheight.value = document.getElementById('container').offsetHeight - // }, 5000) + setTimeout(() => { + canvasWith.value = document.querySelector('.content-box').offsetWidth + canvasheight.value = document.querySelector('.content-box').offsetHeight + }, 5000) if (screenWidth.value < 1180) { menuState.open = false toolState.open = false @@ -926,11 +960,12 @@ } }) window.qiankunActions.onGlobalStateChange((state, prev) => { + console.log(state, '鐖跺眰') bookName.value = state.bookName bookId.value = state.bookId - + state.gotoPage }) - + window.qiankunActions.setGlobalState({ state: 1, // 鍔犺浇瀛愬簲鐢� windowSelection: (data) => { @@ -939,7 +974,6 @@ getSelection(data) } }) - }) watch( @@ -965,7 +999,7 @@ const catalogueData = ref([]) const getCatalogueData = () => { axios - .get(ctxUrl + '/information.json') + .get(ctxUrl + '/catalog.json') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 @@ -1011,6 +1045,10 @@ const searchShow = ref(true) const resourceData = ref({}) const resourceDataList = ref([]) +const resourceImgList = ref([]) +const resourceVideoList = ref([]) +const resourceAudioList = ref([]) +const resourceDocList = ref([]) const resourVisble = ref(false) const resourType = ref('') const testVideo = ref('') //瑙嗛閾炬帴 @@ -1021,13 +1059,24 @@ .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 - console.log(json, '璧勬簮') - resourceData.value = json - resourceDataList.value = json.imgList - classifySelectList[0].count = json.imgList.length - classifySelectList[1].count = json.audioList.length - classifySelectList[2].count = json.videoList.length - classifySelectList[3].count = json.attachmentList.length + if (json.length > 0) { + json.forEach((item) => { + if (item.fileType == '鍥剧墖') { + resourceImgList.value.push(item) + } else if (item.fileType == '瑙嗛') { + resourceVideoList.value.push(item) + } else if (item.fileType == '闊抽') { + resourceAudioList.value.push(item) + } else { + resourceDocList.value.push(item) + } + }) + } + resourceDataList.value = resourceImgList.value + classifySelectList[0].count = resourceImgList.value.length + classifySelectList[1].count = resourceAudioList.value.length + classifySelectList[2].count = resourceVideoList.value.length + classifySelectList[3].count = resourceDocList.value.length }) .catch(function (error) { console.log(error) @@ -1035,12 +1084,13 @@ } const goResourceDetail = (data) => { - resourVisble.value = true - resourType.value = data.type - if (data.type == 'video') { - testVideo.value = resourceUrl + '/resourceData/' + data.name - } else if (data.type == 'word') { - testWord.value = resourceUrl + '/resourceData/' + data.name + resourType.value = data.fileType + if (data.fileType == '瑙嗛') { + resourVisble.value = true + testVideo.value = requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + } else if (data.fileType == 'PDF') { + window.open(requestCtx + '/file/api/ApiDownload?md5=' + data.md5) + // testWord.value = resourceUrl + '/resourceData/' + data.name } } @@ -1050,16 +1100,16 @@ searchText.value = '' switch (item.key) { case 'image': - resourceDataList.value = resourceData.value.imgList + resourceDataList.value = resourceImgList.value break case 'audio': - resourceDataList.value = resourceData.value.audioList + resourceDataList.value = resourceAudioList.value break case 'video': - resourceDataList.value = resourceData.value.videoList + resourceDataList.value = resourceVideoList.value break case 'other': - resourceDataList.value = resourceData.value.attachmentList + resourceDataList.value = resourceDocList.value break } } @@ -1159,7 +1209,7 @@ { lable: '澶�', - key: '20' + key: '18' } ], fontSizeActive: '16', @@ -1187,15 +1237,10 @@ }) const fontSizeSelect = (item) => { settingForm.fontSizeActive = item.key - window.qiankunActions.setGlobalState({ - fontSizeNum: settingForm.fontSizeActive, // 鍔犺浇瀛愬簲鐢� - }) + document.getElementById('app').style.fontSize = item.key + 'px' } const bgColorSelect = (item) => { settingForm.bgColorActive = item.key - window.qiankunActions.setGlobalState({ - bgColor: settingForm.bgColorActive, // 鍔犺浇瀛愬簲鐢� - }) } //绗旇棰滆壊绛涢�� const searchClick = (item) => { @@ -1359,7 +1404,7 @@ name: '鎴睆' } ]) -const canvas = ref(null) +let canvas = null const floatingToolData = reactive({ activeToolData: '', //閫変腑宸ュ叿 elLeft: 400, @@ -1431,6 +1476,9 @@ switch (item.name) { case '鐢荤瑪': canvasShow.value = true + toolSelectData.activeTool = 'huabi' + break + case '鏍囩': break case '鎴睆': jitT() @@ -1466,8 +1514,11 @@ case 'wenzi': break case 'tuichu': - canvasShow.value = false - floatingToolData.activeToolData = '' + canvasShow.value = false + floatingToolData.activeToolData = '' + break + case 'qingchu': + canvas.clear() break } } @@ -1475,7 +1526,7 @@ //閫変腑鐢荤瑪绮楃粏 const selectThickness = (str) => { toolSelectData.thicknessActive = str - init() + canvas.freeDrawingBrush.color = toolSelectData.thicknessActive } const selectLineType = (str) => { @@ -1485,24 +1536,25 @@ //鐢荤瑪棰滆壊閫夋嫨 const lineColorSelect = (item) => { toolSelectData.lineColorActive = item.key - init() + canvas.freeDrawingBrush.color = item.key } //鐢诲竷灞炴�� +const isDrawing = ref(true) // 鏄惁寮�鍚粯鍥撅紝true 寮�鍚紱false 鍏抽棴 const init = () => { - canvas.value = new fabric.Canvas('canvasRef', { - isDrawingMode: true // 鍚敤缁樼敾妯″紡 + canvas = new fabric.Canvas('canvasRef', { + isDrawingMode: isDrawing.value // 鍚敤缁樼敾妯″紡 }) - canvas.value.freeDrawingBrush.color = toolSelectData.lineColorActive - canvas.value.freeDrawingBrush.width = toolSelectData.thicknessActive + canvas.freeDrawingBrush.color = toolSelectData.lineColorActive + canvas.freeDrawingBrush.width = toolSelectData.thicknessActive } - -//鏍囩鏄剧ず闅愯棌 -const labelShow = (str) => {} //鏂囧瓧澶у皬 const selectfontSize = (str) => { toolSelectData.fontSizeActive = str } + +//鏍囩鏄剧ず闅愯棌 +const labelShow = (str) => {} //鎴浘 //鎴浘浜嬩欢 @@ -1522,6 +1574,7 @@ //鍙栨秷鍥炶皟 const closeFn = (base64: any) => { console.log(base64) + floatingToolData.activeToolData = '' } const addScreenshot = () => { if (nameData.value) { @@ -1544,6 +1597,9 @@ } }).then((res) => { getScreenshotList() + nameData.value = '' + urlData.value = '' + floatingToolData.activeToolData = '' screenshotVisble.value = false }) } else { @@ -1589,54 +1645,28 @@ }) ///鍐呭閫変腑 -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 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 - if (txt) { - showToolBox.value = true - dialogToolData.top = e.y - dialogToolData.left = e.x - } - isMouseDown.value = false - } - move.value = false -} - -const getSelection =(data)=>{ +const getSelection = (data) => { if (data.txt) { - console.log(data.node,"data") - showToolBox.value = true - selectText.value = data.txt - selectNode.value = data.node.innerHTML - selectPage.value = data.page - dialogToolData.top = data.y - dialogToolData.left = data.x - } + console.log(data.node, 'data') + showToolBox.value = true + selectText.value = data.txt + selectNode.value = data.node.innerHTML + selectPage.value = data.page + } } const pageScroll = (e) => { + window.qiankunActions.setGlobalState({ + gotoPage: (t, s) => { + // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 + console.log(t, s, '瀛愬簲鐢ㄦ粴鍔�') + } + }) showToolBox.value = false - let scroll = e.target.scrollTop - let offsetHeight = document.getElementById('container').offsetHeight - headerData.process = Math.round((scroll / offsetHeight) * 100) + lineDelete.showLineDelete = false + // let scroll = e.target.scrollTop + // let offsetHeight = document.getElementById('container').offsetHeight + // headerData.process = Math.round((scroll / offsetHeight) * 100) } const toolActive = ref('') @@ -1815,7 +1845,7 @@ createDate: new Date() } dialogToolData.lineHeight.push(lineHeightData) - console.log(dialogToolData.lineHeight,"鍓峮ode") + console.log(dialogToolData.lineHeight, '鍓峮ode') request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', @@ -1870,7 +1900,7 @@ const obj = { desc: formData.desc } - if(!colorActive.value){ + if (!colorActive.value) { ElMessage.error('璇烽�夋嫨绗旇棰滆壊!') return } @@ -1958,13 +1988,10 @@ let nHtml1 = '' nHtml1 = nHtmlText1.replace( rReg1, - `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>` + `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="notesline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>` ) let rHtml1 = '' - rHtml1 = text1.replace( - nHtmlText1, - nHtml1 - ) + rHtml1 = text1.replace(nHtmlText1, nHtml1) textDom1.innerHTML = rHtml1 }) } @@ -1993,17 +2020,14 @@ let rReg1 = new RegExp(`${item.selectText}`, 'ig') let text1 = textDom1.innerHTML let nHtmlText1 = item.selectNode - + let nHtml1 = '' nHtml1 = nHtmlText1.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>` + `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer" class="underline" onclick="deleteScribeShow('${item.selectText}')">${item.selectText}</span>` ) let rHtml1 = '' - rHtml1 = text1.replace( - nHtmlText1, - nHtml1 - ) + rHtml1 = text1.replace(nHtmlText1, nHtml1) textDom1.innerHTML = rHtml1 } } @@ -2024,9 +2048,7 @@ 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.querySelector('.temp-book') - console.log(textDom) if (scribeData.lineHeightList.length > 0) { for (let i = 0; i < scribeData.lineHeightList.length; i++) { let item = scribeData.lineHeightList[i] @@ -2036,14 +2058,11 @@ let nHtml = '' nHtml = nHtmlText.replace( rReg, - `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>` + `<span style="background: ${item.color};padding:3px;cursor: pointer" class="highLight" onclick="deletelineHeightShow('${item.selectText}')">${item.selectText}</span>` ) // nHtmlText = nHtml let rHtml = '' - rHtml = text.replace( - nHtmlText, - nHtml - ) + rHtml = text.replace(nHtmlText, nHtml) textDom.innerHTML = rHtml } } @@ -2052,6 +2071,14 @@ } //姝f枃涓垹闄ら珮浜紝鍒掔嚎锛岀瑪璁版搷浣滄 +const lineDelete = reactive({ + showLineDelete: false, + top: 0, + left: 0, + deleteType: '', + deleteTxt: '' +}) + window.notesVisbleShow = function (txt) { addNoteVisble.value = true let notes = dialogToolData.notesList.find((item) => item.selectText == txt) @@ -2064,43 +2091,77 @@ } 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: bookId.value, - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - getScribeList() - }) + let lines = scribeData.scribeDataList.find((item) => item.selectText == txt) + lineDelete.deleteType = 'underline' + lineDelete.deleteTxt = txt + lineDelete.top = event.screenY + lineDelete.left = event.screenX + lineDelete.showLineDelete = true } 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: bookId.value, - value: JSON.stringify(list) + let lines = scribeData.lineHeightList.find((item) => item.selectText == txt) + lineDelete.deleteType = 'highLight' + lineDelete.deleteTxt = txt + lineDelete.top = event.screenY + lineDelete.left = event.screenX + lineDelete.showLineDelete = true +} + +const lineDeleteBtn = () => { + if (lineDelete.deleteType == 'underline') { + let list = scribeData.scribeDataList.filter((item) => item.selectText != lineDelete.deleteTxt) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'underline', + key: bookId.value, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + lineDelete.showLineDelete = false + let list = document.querySelectorAll('.underline') + list.forEach((itemNode) => { + if (itemNode.innerText == lineDelete.deleteTxt) { + itemNode.removeAttribute('style') + itemNode.className = '' + itemNode.removeAttribute('onclick') } - ] - } - }).then((res) => { - getlineHeightList() - }) + }) + getScribeList() + }) + } else if (lineDelete.deleteType == 'highLight') { + let list = scribeData.lineHeightList.filter((item) => item.selectText != lineDelete.deleteTxt) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'highLight', + key: bookId.value, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + lineDelete.showLineDelete = false + let list = document.querySelectorAll('.highLight') + list.forEach((itemNode) => { + if (itemNode.innerText == lineDelete.deleteTxt) { + itemNode.removeAttribute('style') + itemNode.className = '' + itemNode.removeAttribute('onclick') + } + }) + getlineHeightList() + }) + } } const jumpContent = (id) => { @@ -2143,12 +2204,12 @@ message: '鍒犻櫎绗旇鎴愬姛!', type: 'success' }) - console.log(document.querySelectorAll('.underline')) - let list = document.querySelectorAll('.underline') - list.forEach(itemNode =>{ - console.log(itemNode.nextSibling) - if(itemNode.innerText == item.selectText){ - itemNode.removeAttribute('style'); + console.log(document.querySelectorAll('.notesline')) + let list = document.querySelectorAll('.notesline') + list.forEach((itemNode) => { + if (itemNode.innerText == item.selectText) { + console.log(itemNode.nextSibling) + itemNode.removeAttribute('style') itemNode.nextSibling?.remove() } }) @@ -2157,6 +2218,29 @@ } } +//鍒犻櫎鎴浘 +const deleteScreenshot = (item) => { + let list = screenshotList.value.filter((itemData) => itemData.imgUrl !== item.imgUrl) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'screenshot', + key: bookId.value, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎鎴浘鎴愬姛!', + type: 'success' + }) + getScreenshotList() + }) +} //鍐呭鍖哄煙椤堕儴鏄剧ず const headerData = reactive({ @@ -2475,11 +2559,14 @@ padding: 10px 0; align-items: center; .resourceImg { - width: 130px; + // width: 130px; height: 80px; background: #fff; border-radius: 5px; overflow: hidden; + display: flex; + align-items: center; + justify-content: center; img { height: 100%; width: 100%; @@ -2508,11 +2595,22 @@ .captureItem { margin-bottom: 10px; width: 46%; + position: relative; .imgBox { border: 1px solid #d8d8d8; width: 100%; height: 80px; margin-bottom: 5px; + } + .deleteBox { + position: absolute; + top: 2px; + right: 2px; + width: 20px; + height: 20px; + background: rgba(44, 44, 44, 0.3); + text-align: center; + padding: 2px; } // .capture { // width: 100%; @@ -2883,7 +2981,6 @@ .dialogToolBox { position: fixed; z-index: 2; - .toolSelectBox { height: 57px; display: flex; @@ -2944,6 +3041,14 @@ } } } +.lineDeleteBox { + position: fixed; + z-index: 2; + border: 1px solid #0093ff; + padding: 20px 8px; + background: #fff; + border-radius: 5px; +} .wendabox { width: 100%; height: 700px; @@ -2990,6 +3095,9 @@ .myNoteDialogs { width: 500px !important; } +.screenshotDialog { + width: 400px !important; +} .noteColorSelectBox { margin-top: 10px; width: 190px; -- Gitblit v1.9.1