From 30605ea2c8e9683e8202cd531de84ce98fd7be75 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期五, 17 五月 2024 15:56:44 +0800 Subject: [PATCH] biji --- src/views/home.vue | 669 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 392 insertions(+), 277 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 6ca5fd0..27438f3 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -13,10 +13,10 @@ <!-- 鑿滃崟 --> <div class="menuBox"> <div - :class="['menuItem', activeMenu == index ? 'active' : '']" + :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-for="(item, index) in menuData" :key="index" - @click="menuItemClick(index)" + @click="menuItemClick(item.name)" > <div class="menuIcon imgBox"> <img :src="item.icon" /> @@ -49,14 +49,14 @@ </div> </div> </el-form-item> - <div class="inline"> + <!-- <div class="inline"> <el-form-item label="绛旈闊虫晥"> <el-switch v-model="settingForm.acoustics" /> </el-form-item> <el-form-item label="绛旈鍔ㄧ敾"> <el-switch v-model="settingForm.animation" /> </el-form-item> - </div> + </div> --> <el-form-item label="搴曡壊"> <div class="bgColor"> <div @@ -99,7 +99,7 @@ @keyup.enter="searchBook" > <template #prefix> - <el-icon><Search /></el-icon> + <el-icon class="hover"><Search /></el-icon> </template> </el-input> </div> @@ -139,7 +139,7 @@ </div> </div> <!-- 绗旇 --> - <div class="notesBox" v-if="activeMenu == 1"> + <div class="notesBox" v-if="activeMenu == '鐩綍'"> <div class="screenBox"> <div class="title">绛涢��</div> <div class="flex1 hover" @click="searchClick('all')"> @@ -159,41 +159,47 @@ </div> <div class="list-box"> <div v-if="scribeData.noteList.length > 0"> - <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem"> - <div class="textBox"> - <div class="title"> - <div class="title-con"> - <div class="border-left" :style="{ 'border-right-color': item.color }"></div> - <span>{{ item.createDate }}</span> + <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem"> + <div class="chapterName">{{ noteItem.chapterName }}</div> + <div v-for="(item, index) in noteItem.noteList" :key="item.key" class="listItem"> + <div class="textBox"> + <div class="title"> + <div class="title-con"> + <div + class="border-left" + :style="{ 'border-right-color': item.color }" + ></div> + <span>{{ moment(item.createDate).format('YYYY-MM-DD') }}</span> + </div> + <div> + <img :src="bianji" @click="update(item)" /> + <img :src="shanchu" @click="deleteBtn(item)" /> + </div> </div> - <div> - <img :src="bianji" @click="update(item)" /> - <img :src="shanchu" @click="deleteBtn(item)" /> + <div + class="noteText hover 123456" + @click="jumpContent(item)" + :style="{ + background: + item.color == '#F5E12A' + ? 'rgba(255,234,41,0.1)' + : item.color == '#76F0AE' + ? 'rgba(83,255,162,0.1)' + : item.color == '#59CFF5' + ? 'rgba(93,216,255,0.1)' + : item.color == '#CAA5FC' + ? 'rgba(205,167,255,0.1)' + : item.color == '#F5A0B9' + ? 'rgba(255,167,193,0.1)' + : item.color + }" + > + <div class="con hover"> + {{ item.note }} + </div> </div> + <div class="chapter">{{ item.txt }}</div> </div> - <div - class="noteText hover 123456" - @click="jumpContent(item)" - :style="{ - background: - item.color == '#F5E12A' - ? 'rgba(255,234,41,0.1)' - : item.color == '#76F0AE' - ? 'rgba(83,255,162,0.1)' - : item.color == '#59CFF5' - ? 'rgba(93,216,255,0.1)' - : item.color == '#CAA5FC' - ? 'rgba(205,167,255,0.1)' - : item.color == '#F5A0B9' - ? 'rgba(255,167,193,0.1)' - : item.color - }" - > - <div class="con hover"> - {{ item.note }} - </div> - </div> - <div class="chapter">{{ item.txt }}</div> </div> </div> </div> @@ -203,7 +209,7 @@ </div> </div> <!-- 璧勬簮 --> - <div class="" v-if="activeMenu == 2"> + <div class="" v-if="activeMenu == '璧勬簮'"> <div class="resourceBox"> <div class="classification"> <div @@ -228,9 +234,14 @@ </div> </div> <div class="inputBox" v-if="!searchShow"> - <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText"> + <el-input + class="custom-input" + placeholder="璇疯緭鍏ュ唴瀹�" + v-model="searchText" + @keyup.enter="searchBook" + > <template #prefix> - <el-icon @click="searchBook" class="hover"><Search /></el-icon> + <el-icon><Search /></el-icon> </template> </el-input> </div> @@ -258,10 +269,7 @@ ><Tickets /></el-icon> </div> - <div class="rName" v-if="searchText != ''" v-html="item.name"></div> - <div class="rName" v-else :title="item.resourceName"> - {{ item.resourceName }} - </div> + <div class="rName" v-html="item.resourceName"></div> </div> </el-col> </el-row> @@ -272,7 +280,7 @@ </div> </div> <!-- 鐭ヨ瘑鍥捐氨 --> - <div class="" v-if="activeMenu == 3"> + <div class="" v-if="activeMenu == '鐭ヨ瘑鍥捐氨'"> <div class="list-box"> <div> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> @@ -280,7 +288,7 @@ </div> </div> <!-- 鎴浘 --> - <div class="" v-if="activeMenu == 4"> + <div class="" v-if="activeMenu == '鎴浘'"> <div class="list-box"> <div class="screenshot" v-if="screenshotList.length > 0"> <div v-for="(item, index) in screenshotList" :key="item" class="captureItem"> @@ -304,7 +312,7 @@ </div> </div> <!-- 鏍囩 --> - <div class="" v-if="activeMenu == 5"> + <div class="" v-if="activeMenu == '鏍囩'"> <div class="list-box"> <div> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> @@ -320,13 +328,16 @@ <div class="pageBox"> <!-- 澶撮儴鏄剧ず --> <div class="pageBox-header"> - <div class="classTime"> - <div class="qureIcon"></div> - <div class="">宸蹭笂璇撅細{{ headerData.classTime }}</div> + <!-- <div class="classTime"> --> + <div style="width: 150px"> + <!-- <div class="qureIcon"></div> + <div class="">宸蹭笂璇撅細{{ headerData.classTime }}</div> --> </div> <div class="progress"> <div class="bookName">{{ bookName }}</div> - <div>{{ headerData.process }}%</div> + <div v-if="headerData.totlePage && bookName"> + {{ headerData.process }}/{{ headerData.totlePage }} + </div> </div> <div class="rightBox"> <div class="pageSizeBox"> @@ -334,11 +345,11 @@ <div>{{ headerData.pageSize }}%</div> <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> </div> - <div class="brushImgBox"> + <!-- <div class="brushImgBox"> <div @click="jumpContent('note' + index)"> <img :src="huabi2" class="brushImg" />鐢荤瑪 </div> - </div> + </div> --> </div> </div> <!-- 寰簲鐢ㄧ洅瀛� --> @@ -360,7 +371,7 @@ <!-- 鏁欏缁勪欢 --> <div class="toolBox"> <div class="toolTitle"> - <span>{{ toolState.open ? '鏁欏缁勪欢' : '缁勪欢' }}</span> + <span>{{ toolState.open ? '瀛︿範缁勪欢' : '缁勪欢' }}</span> <div class="text"></div> </div> <div class="menuList"> @@ -381,7 +392,7 @@ <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> </div> - <div class="classRoomBox" v-if="toolState.open"> + <div class="classRoomBox" v-if="false"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="澶囪缁勪欢" name="first"> <div class="tabBox"> @@ -481,7 +492,11 @@ </div> </div> </div> - <div class="brushBox" v-if="floatingToolData.activeToolData == '鐢荤瑪'"> + <div + class="brushBox" + :style="{ left: brushBoxLeft + 'px' }" + v-if="floatingToolData.activeToolData == '鐢荤瑪'" + > <div class="toolList"> <el-popover placement="top" width="250" trigger="click"> <div class="popinnerBox"> @@ -547,7 +562,7 @@ <template #reference> <div class="floatToolItem" @click="toolSelectHandle('huabi')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="huabi2" alt="" /> </div> <div class="text">鐢荤瑪</div> </div> @@ -555,25 +570,34 @@ </el-popover> <el-popover placement="top" width="250" trigger="click"> <div class="popinnerBox"> - <div class="write"> - <div class="characters"> + <div class="lineStyle"> + <div class="lineTypeBox"> <div - :class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'" + :class="toolSelectData.fontSizeActive == '14' ? 'typeItem lineTypeActive' : 'typeItem'" @click="selectfontSize('14')" > 灏� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '14'"> + <img :src="xuanzhong" /> + </div> </div> <div - :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'" + :class="toolSelectData.fontSizeActive == '16' ? 'typeItem lineTypeActive' : 'typeItem'" @click="selectfontSize('16')" > 涓� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '16'"> + <img :src="xuanzhong" /> + </div> </div> <div - :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'" + :class="toolSelectData.fontSizeActive == '18' ? 'typeItem lineTypeActive' : 'typeItem'" @click="selectfontSize('18')" > 澶� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'"> + <img :src="xuanzhong" /> + </div> </div> </div> <div class="lineStyle"> @@ -603,26 +627,10 @@ </el-popover> <el-popover placement="top" width="250" trigger="click"> <div class="popinnerBox"> - <div class="write"> - <div class="characters"> - <div - :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'" - @click="selectfontSize('14')" - > - 灏� - </div> - <div - :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'" - @click="selectfontSize('16')" - > - 涓� - </div> - <div - :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'" - @click="selectfontSize('18')" - > - 澶� - </div> + <div class="graphBox"> + <div class="graphSelect"> + + </div> <div class="lineStyle"> <div class="colorSelectBox"> @@ -651,25 +659,25 @@ </el-popover> <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> <div class="imgBox"> - <img :src="clearPrevious" alt="" /> + <img :src="clear" alt="" /> </div> <div class="text">姗$毊鎿�</div> </div> <div class="floatToolItem" @click="toolSelectHandle('chexiao')"> <div class="imgBox"> - <img :src="clear" alt="" /> + <img :src="clearPrevious" alt="" /> </div> <div class="text">鎾ら攢</div> </div> <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="chongzuo" alt="" /> </div> <div class="text">閲嶅仛</div> </div> <div class="floatToolItem" @click="toolSelectHandle('qingchu')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="qingchu2" alt="" /> </div> <div class="text">娓呴櫎</div> </div> @@ -763,7 +771,8 @@ <template #footer> <span class="dialog-footer"> <el-button @click="handleClose">鍙� 娑�</el-button> - <el-button type="primary" @click="addUserKey">纭� 瀹�</el-button> + <el-button type="primary" @click="addUserKey" v-if="!isUpdate">纭� 瀹�</el-button> + <el-button type="primary" @click="updateUserKey" v-if="isUpdate">纭� 瀹�</el-button> </span> </template> </el-dialog> @@ -907,6 +916,8 @@ import show from '../assets/images/operation/show.png' import tuichu from '../assets/images/operation/tuichu.png' import tuxing from '../assets/images/operation/tuxing.png' +import chongzuo from '../assets/images/operation/chongzuo.png' +import qingchu2 from '../assets/images/operation/qingchu.png' import gaoliang from '../assets/images/operation/gaoliang.png' import gaoliang1 from '../assets/images/operation/gaoliang-b.png' @@ -953,7 +964,7 @@ const screenWidth = ref( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ) - +const brushBoxLeft = ref(500) let microApp = null // 寰簲鐢ㄥ疄渚� const bookName = ref('') const bookId = ref(1) @@ -969,6 +980,7 @@ menuState.open = false toolState.open = false } + brushBoxLeft.value = (screenWidth.value - 450) / 2 window.onresize = () => { return (() => { screenWidth.value = @@ -1003,7 +1015,10 @@ getSelection(data) } else { showToolBox.value = false - toolActive = '' + lineDelete.showLineDelete = false + toolActive.value = '' + lineDelete.top = data.y + 20 + lineDelete.left = data.x } }, catalogChange: (data) => { @@ -1032,13 +1047,16 @@ if (screenWidth.value < 1180) { menuState.open = false toolState.open = false + floatingToolData.elLeft = 100 + } else { + floatingToolData.elLeft = 300 } } ) watch( () => bookId.value, (val) => { - // getNotesList() // 鑾峰彇绗旇 + getNotesList() // 鑾峰彇鑿滃崟绗旇 // getlineHeightList() //鑾峰彇楂樹寒 // getScribeList() //鑾峰彇鍒掔嚎 getScreenshotList() //鎴浘 @@ -1050,10 +1068,13 @@ axios .get(resourceUrl + '/1/information.json?t=123') .then(function (response) { - console.log(response.data) + console.log(response.data, '鐩綍') var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 + catalogueData.value = json.data + headerData.totlePage = json.data[json.data.length - 1].end + console.log(json[json.length - 1]) }) .catch(function (error) { console.log(error) @@ -1062,7 +1083,7 @@ const defaultProps = { children: 'children', label: 'label', - page: 'page', + page: 'page' } const filterNode = (value, data) => { if (!value) return true @@ -1071,6 +1092,7 @@ const handleNodeClick = (data) => { console.log(data) + headerData.process = data.start if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(data.chapter, data.start) } @@ -1170,6 +1192,9 @@ resourceDataList.value = resourceDocList.value break } + resourceDataList.value.forEach((item) => { + item.resourceName = '<p>' + htmlStr + '</p>' + }) } const searchBtn = () => { if (searchShow.value) { @@ -1201,31 +1226,33 @@ icon: jietu }, { - name: '鏍囩', + name: '涔︾', icon: biaoqian } ]) // 閫変腑鑿滃崟 -const activeMenu = ref(0) +const activeMenu = ref('鐩綍') //璧勬簮绫诲瀷 const resourceType = ref('default') // 鑿滃崟鐐瑰嚮 -const menuItemClick = (index) => { - activeMenu.value = index +const menuItemClick = (name) => { + activeMenu.value = name + searchText.value = '' menuState.open = true - switch (index) { - case '0': + switch (name) { + case '鐩綍': break - case '1': - // getSignData() + case '绗旇': + getNotesList() break - case '2': + case '璧勬簮': break - case '3': + case '鐭ヨ瘑鍥捐氨': break - case '4': + case '鎴浘': + getScreenshotList() break - case '5': + case '涔︾': break } } @@ -1247,6 +1274,13 @@ const selectResourceType = (type) => { resourceType.value = type + if (resourceType.value == 'teacher') { + activeClassify.value = 'image' + resourceDataList.value = [] + } else { + activeClassify.value = 'image' + resourceDataList.value = resourceImgList.value + } } const searchText = ref<string>('') //绛涢�� const menuState = reactive({ @@ -1258,19 +1292,19 @@ fontSizeList: [ { lable: '灏�', - key: '14' + key: 14 }, { lable: '涓�', - key: '16' + key: 16 }, { lable: '澶�', - key: '18' + key: 18 } ], - fontSizeActive: '16', + fontSizeActive: 16, acoustics: false, animation: false, bgColorList: [ @@ -1295,7 +1329,9 @@ }) const fontSizeSelect = (item) => { settingForm.fontSizeActive = item.key - document.getElementById('app').style.fontSize = item.key + 'px' + window.qiankunActions.setGlobalState({ + fontSize: item.key + }) } const bgColorSelect = (item) => { settingForm.bgColorActive = item.key @@ -1307,32 +1343,59 @@ } else { menuState.notesColor = 'all' } - // getNotesList() + getNotesList() } const catalogTree = ref() const searchBook = async () => { - if (activeMenu.value == 0) { - if (catalogTree) catalogTree.value.filter(searchText.value) - } - if (activeMenu.value == 1) { - // getNotesList() - getSignData() - } - if (activeMenu.value == 2) { - let dataList = JSON.parse(JSON.stringify(resourceDataList.value)) - if (searchText.value) { - resourceDataList.value = [] - searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') - let text = searchText.value.replace(/^\s*|\s*$/g, '') - dataList.forEach((item) => { - if (item.name.indexOf(text) > -1) { - let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>' - let htmlStr = item.name.split(text).join(replaceStr) - item.name = '<p>' + htmlStr + '</p>' - resourceDataList.value.push(item) + switch (activeMenu.value) { + case '鐩綍': + if (catalogTree) catalogTree.value.filter(searchText.value) + break + case '绗旇': + getNotesList() + break + case '璧勬簮': + let dataList = JSON.parse(JSON.stringify(resourceDataList.value)) + if (searchText.value) { + resourceDataList.value = [] + searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') + let text = searchText.value.replace(/^\s*|\s*$/g, '') + dataList.forEach((item) => { + if (item.resourceName.indexOf(text) > -1) { + let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>' + let htmlStr = item.resourceName.split(text).join(replaceStr) + item.resourceName = '<p>' + htmlStr + '</p>' + resourceDataList.value.push(item) + } + }) + } else { + resourceDataList.value = [] + switch (activeClassify.value) { + case 'image': + resourceDataList.value = resourceImgList.value + break + case 'audio': + resourceDataList.value = resourceAudioList.value + break + case 'video': + resourceDataList.value = resourceVideoList.value + break + case 'other': + resourceDataList.value = resourceDocList.value + break } - }) - } + resourceDataList.value.forEach((item) => { + item.resourceName = '<p>' + htmlStr + '</p>' + }) + } + break + case '鐭ヨ瘑鍥捐氨': + break + case '鎴浘': + getScreenshotList() + break + case '涔︾': + break } } @@ -1459,7 +1522,7 @@ { activeIcon: biaoqian1, icon: biaoqianw, - name: '鏍囩' + name: '涔︾' }, { activeIcon: jieping1, @@ -1538,14 +1601,14 @@ //娴獥宸ュ叿鏍忕偣鍑讳簨浠� const floatItemHandle = (item) => { floatingToolData.activeToolData = item.name - switch (item.name) { + switch (floatingToolData.activeToolData) { case '鐢荤瑪': canvasShow.value = true toolSelectData.activeTool = 'huabi' break case '鏍囨敞': break - case '鏍囩': + case '涔︾': reMark() break case '鎴睆': @@ -1624,7 +1687,7 @@ //鏍囨敞鏄剧ず闅愯棌 const labelShow = (str) => {} -//鏍囩 +//涔︾ const reMark = () => {} //鎴浘 //鎴浘浜嬩欢 @@ -1697,8 +1760,20 @@ } }).then((res) => { if (res && res.length > 0 && res[0].value) { - screenshotList.value = JSON.parse(res[0].value) + screenshotList.value =[] screenshotData.value = JSON.parse(res[0].value) + let list = JSON.parse(res[0].value) + list.forEach((item) => { + let text = searchText.value.replace(/^\s*|\s*$/g, '') + if (searchText.value) { + if (item.name.indexOf(text) > -1) { + screenshotList.value.push(item) + } + } else { + screenshotList.value.push(item) + } + }) + console.log(screenshotList.value,"124") } }) } @@ -1732,7 +1807,6 @@ } //閫変腑鏂囧瓧宸ュ叿鏍� -const selectText = ref('') //閫変腑鏂囧瓧 const showToolBox = ref(false) const dialogToolData = reactive({ left: 500, @@ -1797,7 +1871,9 @@ //绗旇寮圭獥 const addNoteVisble = ref(false) +const isUpdate = ref(false) const formData = reactive({ + id: '', desc: '' }) //绗旇寮圭獥鍏抽棴 @@ -1883,9 +1959,10 @@ colorActive.value = '' switch (item.name) { case 'AI闃呰': - const utterance = new SpeechSynthesisUtterance(selectText.value) + const utterance = new SpeechSynthesisUtterance(dialogToolData.txt) utterance.lang = 'zh-CN' // 璁剧疆璇█涓轰腑鏂� synth.speak(utterance) + showToolBox.value = false break case '鍒掔嚎': break @@ -1901,7 +1978,7 @@ case '澶嶅埗': try { //澶嶅埗 - await toClipboard(selectText.value) + await toClipboard(dialogToolData.txt) //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣� ElMessage({ message: '澶嶅埗鎴愬姛', @@ -1944,6 +2021,7 @@ id: toolClass.uuid(8), txt: dialogToolData.txt, page: dialogToolData.page, + chapterNum: dialogToolData.chapter, type: 'Highlight', color: colorActive.value }) @@ -1956,6 +2034,7 @@ id: toolClass.uuid(8), txt: dialogToolData.txt, page: dialogToolData.page, + chapterNum: dialogToolData.chapter, type: 'Dashing', color: colorActive.value }) @@ -1970,13 +2049,13 @@ return } dom = 'notes-' + bookId.value - data = - dialogToolData.notesList.length != 0 ? dialogToolData.notesList[dialogToolData.chapter] : [] + data = dialogToolData.notesList[dialogToolData.chapter] if (!data) data = [] data.push({ id: toolClass.uuid(8), txt: dialogToolData.txt, page: dialogToolData.page, + chapterNum: dialogToolData.chapter, type: 'Note', color: noteColorActive.value, createDate: new Date(), @@ -2004,6 +2083,7 @@ noteColorActive.value = '' toolActive.value = '' getSignData() + getNotesList() }) } @@ -2045,6 +2125,7 @@ const data = JSON.parse(item.value) // 鍌ㄥ�� dialogToolData.scribeList[item.key] = data + // 娓叉煋 for (let j = 0; j < data.length; j++) { const citem = data[j] @@ -2067,9 +2148,7 @@ const item = res[i] const data = JSON.parse(item.value) // 鍌ㄥ�� - scribeData.noteList = data dialogToolData.notesList[item.key] = data - console.log(dialogToolData.notesList, 'notesList') // 娓叉煋 for (let j = 0; j < data.length; j++) { const citem = data[j] @@ -2077,6 +2156,61 @@ window.qiankunState.renderSign(citem.type, citem) } } + } + }) +} + +//鑿滃崟绗旇鍒楄〃 +const getNotesList = () => { + let chapterList = [] + catalogueData.value.forEach((item) => { + chapterList.push(item.chapter + '') + }) + scribeData.noteList = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'notes-' + bookId.value, + keys: chapterList + } + }).then((res) => { + if (res && res.length > 0) { + for (let i = 0; i < res.length; i++) { + const item = res[i] + // 鍌ㄥ�� + let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key)) + let list = JSON.parse(item.value) + let itemList = [] + if (list.length > 0) { + list.forEach((item) => { + if (searchText.value) { + let text = searchText.value.replace(/^\s*|\s*$/g, '') + if (item.note.indexOf(text) > -1 || item.txt.indexOf(text) > -1) { + if (menuState.notesColor == 'all') { + itemList = list + } else if (item.color == menuState.notesColor) { + itemList.push(item) + } + } + } else { + if (menuState.notesColor == 'all') { + itemList = list + } else if (item.color == menuState.notesColor) { + itemList.push(item) + } + } + }) + } + if (data.chapter == Number(item.key) && itemList.length > 0) { + scribeData.noteList.push({ + chapter: data.chapter, + chapterName: data.label, + noteList: itemList + }) + } + } + console.log(scribeData.noteList, 'scribeData.noteList') } }) } @@ -2091,34 +2225,26 @@ }) // 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� -window.signClick = (type, id) => { - console.log('signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�', type, id) - // if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[id]}) +window.signClick = (type, id, chapterNum) => { + console.log('signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�', type, id, chapterNum) + dialogToolData.chapter = chapterNum if (type == 'Note') { - let data = dialogToolData.notesList.filter((item) => id.indexOf(item.id) == -1) - console.log(data) - formData.desc = notes.note - noteColorActive.value = notes.color + let list = dialogToolData.notesList[chapterNum] + let data = list.find((item) => item.id == id) + console.log(data, 123) + formData.id = id + formData.desc = data.note + noteColorActive.value = data.color addNoteVisble.value = true + isUpdate.value = true } else { lineDelete.showLineDelete = true lineDelete.deleteType = type lineDelete.id = id - lineDelete.top = 500 - lineDelete.left = 500 + dialogToolData.chapter = chapterNum } } -window.notesVisbleShow = function (txt) { - addNoteVisble.value = true - let notes = dialogToolData.notesList.find((item) => item.id == id) - formData.desc = notes.note - colorActive.value = notes.color - selectNode.value = notes.selectNode - selectText.value = notes.selectText - selectPage.value = notes.selectPage - dialogToolData.chapter = notes.chapter -} const delUserKey = () => { let type = lineDelete.deleteType let ids = lineDelete.id @@ -2134,10 +2260,7 @@ data = dialogToolData.scribeList break } - data = data.filter((item) => ids.indexOf(item.id) == -1) - console.log(data[0]) - let list = data[0].filter((item) => item.id != ids) - console.log(list) + let list = data[dialogToolData.chapter].filter((item) => item.id != ids) request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', @@ -2151,116 +2274,84 @@ ] } }).then((res) => { + lineDelete.showLineDelete = false if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ ids: [ids] }) getSignData() }) } -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') - } - }) - 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 = (item) => { console.log(item) - if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(5, 100) + if (window.qiankunState && window.qiankunState.gotoPage) + window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) } -//绗旇缂栬緫 -const update = (item, type) => { - dialogToolData.notesList.splice( - dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText), - 1 - ) - dialogToolData.txt = item.txt - dialogToolData.page = item.page +//鑿滃崟绗旇缂栬緫 +const update = (item) => { + console.log(item) dialogToolData.chapter = item.chapterNum noteColorActive.value = item.color - dialogToolData.chapter = item.chapter + formData.id = item.id formData.desc = item.note addNoteVisble.value = true + isUpdate.value = true +} +const updateUserKey = () => { + let data = scribeData.noteList.find((item1) => item1.chapter == dialogToolData.chapter) + data.noteList.forEach((itemNote) => { + if ((itemNote.id = formData.id)) { + itemNote.note = formData.desc + } + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookId.value, + key: dialogToolData.chapter, + value: JSON.stringify(data.noteList) + } + ] + } + }).then((res) => { + addNoteVisble.value = false + isUpdate.value = false + getNotesList() + getSignData() + }) } -//鍒犻櫎 +//鑿滃崟鍒犻櫎绗旇 const deleteBtn = (item) => { - if (type == 'note') { - // 绉婚櫎 - let list = dialogToolData.noteList.filter((itemData) => itemData.id !== item.id) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'notes', - key: bookId.value, - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - ElMessage({ - message: '鍒犻櫎绗旇鎴愬姛!', - type: 'success' - }) - if (window.qiankunState && window.qiankunState.delSign) - window.qiankunState.delSign({ ids: [id] }) - getNotesList() + let data = scribeData.noteList.find((item1) => item1.chapter == Number(item.chapterNum)) + // 绉婚櫎 + let list = data.noteList.filter((itemData) => itemData.id !== item.id) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookId.value, + key: item.chapterNum, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎绗旇鎴愬姛!', + type: 'success' }) - } + getNotesList() + if (window.qiankunState && window.qiankunState.delSign) { + window.qiankunState.delSign({ ids: [item.id] }) + } + }) } //鍐呭鍖哄煙椤堕儴鏄剧ず @@ -2271,6 +2362,7 @@ minutes: 0, hours: 0, process: 0, + totlePage: 0, pageSize: 100 }) //涓婅鏃堕暱璁℃椂鍣� @@ -2302,16 +2394,21 @@ } const changePageSize = (str) => { - if (str == 'add') { - headerData.pageSize = Number(headerData.pageSize) + 5 - } else { - headerData.pageSize = Number(headerData.pageSize) - 5 + if (str == 'add' && headerData.pageSize < 150) { + headerData.pageSize = Number(headerData.pageSize) + 10 + window.qiankunActions.setGlobalState({ + scale: headerData.pageSize + }) + } else if (str == 'reduce' && headerData.pageSize > 50) { + headerData.pageSize = Number(headerData.pageSize) - 10 + window.qiankunActions.setGlobalState({ + scale: headerData.pageSize + }) } } const layoutBtn = () => { localStorage.clear() - console.log(888) router.push('/login') } </script> @@ -2439,10 +2536,12 @@ .count { width: 35px; margin: 0 auto; - margin-top:5px; + margin-top: 5px; border-radius: 10px; background: #fff; color: #c8c8c8; + height: 18px; + font-size: 12px; } .activeClassify, .classifyItem:hover { @@ -2469,7 +2568,7 @@ } .inputBox { margin-top: 10px; - width:100% !important; + width: 100% !important; } } .resourceTab { @@ -2503,12 +2602,13 @@ } } .inputBox { - width:85%; + width: 85%; .custom-input { border: 1px solid #0093ff !important; border-radius: 50px; overflow: hidden; background: #fff; + height: 34px; } .is-focus, .el-input__wrapper { @@ -2714,6 +2814,9 @@ } } } + .chapterName { + margin: 15px; + } } } .menuStateBox { @@ -2742,6 +2845,7 @@ padding: 0 20px; background: #fff; display: flex; + z-index: 99; align-items: center; justify-content: space-between; .classTime { @@ -2762,8 +2866,9 @@ .progress { text-align: center; .bookName { - font-weight: bold; - margin-bottom: 3px; + font-weight: 800; + margin-bottom: 5px; + color: #333; } } .rightBox { @@ -2772,14 +2877,19 @@ display: flex; align-items: center; padding: 0 20px; - border-right: 1px solid #d8d8d8; + div { padding: 5px; + img { + width: 18px; + height: 18px; + } } } .brushImgBox { display: flex; align-items: center; + border-left: 1px solid #d8d8d8; div { padding: 5px; display: flex; @@ -2796,6 +2906,7 @@ .pageBox-content { height: calc(100% - 57px); background: #fbf9f4; + padding: 10px 0; .content-box { height: 100%; position: relative; @@ -2863,11 +2974,13 @@ border-radius: 3px 0px 0px 3px; border: 1px solid #bce3ff; position: absolute; - line-height: 22px; top: 50%; right: 50px; - text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); + display: flex; + align-items: center; + justify-content: center; + img { height: 10px; width: 18px; @@ -2944,7 +3057,7 @@ height: 310px; top: 300px; left: 450px; - z-index: 99; + z-index: 2000; border-radius: 10px; padding: 5px; overflow: hidden; @@ -2955,6 +3068,7 @@ align-items: center; border-radius: 5px; color: #fff; + cursor: pointer; img { margin-right: 8px; } @@ -2971,7 +3085,7 @@ .brushBox { position: fixed; - left: 500px; + // left: 40%; bottom: 20px; z-index: 99; border-radius: 5px; @@ -2984,14 +3098,15 @@ justify-content: center; align-items: center; .floatToolItem { - margin: 10px; - width: 48px; + margin: 6px; + width: 46px; border-radius: 5px; text-align: center; flex: 1; + font-size: 14px; .imgBox { - height: 22px; - width: 22px; + height: 18px; + width: 18px; text-align: center; margin: 0 auto; margin-bottom: 5px; -- Gitblit v1.9.1