From 480728c3c1b96d94a2053c1e418c173006d4ff68 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期二, 21 五月 2024 10:40:08 +0800 Subject: [PATCH] json --- src/views/home.vue | 1479 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 961 insertions(+), 518 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 118f144..b4ac3ad 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -13,17 +13,17 @@ <!-- 鑿滃崟 --> <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" /> </div> <div class="name">{{ item.name }}</div> </div> - <div class="reload hover" @click="reload()">鍒锋柊</div> + <!-- <div class="reload hover" @click="reload()">鍒锋柊</div> --> <!-- 璁剧疆 --> <el-popover placement="right" :width="300" trigger="click"> <div class="settingBox"> @@ -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 @@ -91,10 +91,15 @@ <!-- 鑿滃崟鍐呭 --> <div class="menuContent" v-if="menuState.open"> <div class="searchBox"> - <div class="inputBox" v-if="activeMenu !== 2"> - <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText"> + <div class="inputBox" v-if="activeMenu !== '璧勬簮'"> + <el-input + class="custom-input" + placeholder="璇疯緭鍏ュ唴瀹�" + v-model="searchText" + @keyup.enter="searchBook" + > <template #prefix> - <el-icon @click="searchBook"><Search /></el-icon> + <el-icon class="hover"><Search /></el-icon> </template> </el-input> </div> @@ -111,21 +116,30 @@ </div> </div> <!-- 鐩綍 --> - <div class="menuList" v-if="activeMenu == 0"> + <div class="menuList" v-if="activeMenu == '鐩綍'"> <el-tree - style="max-width: 600px" + ref="catalogTree" default-expand-all="true" + expand-on-click-node="false" :data="catalogueData" :props="defaultProps" v-if="catalogueData.length > 0" @node-click="handleNodeClick" - /> + :filter-node-method="filterNode" + > + <template #default="{ node, data }"> + <div class="custom-tree-node"> + <div class="catalogueLabel" :title="node.label">{{ node.label }}</div> + <span class="pageNum">{{ data.page }}</span> + </div> + </template> + </el-tree> <div v-if="catalogueData.length == 0"> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> </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')"> @@ -144,53 +158,59 @@ </div> </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-if="scribeData.noteList.length > 0"> + <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)" class="hover" /> + <img :src="shanchu" @click="deleteBtn(item)" class="hover" /> + </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> - <div v-if=" scribeData.noteList.length == 0"> + <div v-if="scribeData.noteList.length == 0"> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> </div> </div> </div> <!-- 璧勬簮 --> - <div class="" v-if="activeMenu == 2"> - <div class="resourceBox"> + <div class="" v-if="activeMenu == '璧勬簮'"> + <div class="resourceBox" v-if="classifySelectList.length > 0"> <div class="classification"> <div v-for="item in classifySelectList" @@ -214,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> @@ -233,21 +258,12 @@ <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" + <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> + <el-icon v-else-if="activeClassify == 'exercises'" size="30" ><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" :title="item.resourceName">{{ item.resourceName }}</div> </div> </el-col> </el-row> @@ -258,7 +274,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="鏆傛棤鏁版嵁" /> @@ -266,19 +282,20 @@ </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"> - <div class="imgBox"> - <img - :src="item.imgUrl" - class="capture" - mode="aspectFill" - @click="getCapture(item)" - /> - <div class="deleteBox hover" @click="deleteScreenshot(item, 'capture')"> - <img :src="shanchu" /> + <div class="imgBox" @mouseover="showDelete = index" @mouseleave="showDelete = null"> + <img :src="item.imgUrl" class="capture hover" mode="aspectFill" /> + <div class="deleteBox" v-if="showDelete == index"> + <div class="delImg"> + <el-icon @click="getCapture(item, index)" size="18" class="icon hover" + ><View + /></el-icon> + <img :src="bianji" class="icon hover" @click="updateScreenshot(item)" /> + <img :src="shanchu" class="icon hover" @click="deleteScreenshot(item)" /> + </div> </div> </div> <div class="captureName" :title="item.name">{{ item.name }}</div> @@ -290,9 +307,17 @@ </div> </div> <!-- 鏍囩 --> - <div class="" v-if="activeMenu == 5"> + <div class="" v-if="activeMenu == '涔︾'"> <div class="list-box"> - <div> + <div v-if="reMarkList.length > 0"> + <div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem"> + <div class="reMarkCon">{{ item.chapterName }} 绗瑊{ item.page }}椤�</div> + <div class="deleteReMarkImg"> + <img :src="shanchu" class="icon hover" @click="deleteReMark(item)" /> + </div> + </div> + </div> + <div v-else> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> </div> </div> @@ -306,13 +331,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 class="bookName">{{ bookConfig.bookName }}</div> + <div v-if="headerData.totlePage && bookConfig.bookName"> + {{ headerData.process }}/{{ headerData.totlePage }} + </div> </div> <div class="rightBox"> <div class="pageSizeBox"> @@ -320,11 +348,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> <!-- 寰簲鐢ㄧ洅瀛� --> @@ -346,7 +374,7 @@ <!-- 鏁欏缁勪欢 --> <div class="toolBox"> <div class="toolTitle"> - <span>{{ toolState.open ? '鏁欏缁勪欢' : '缁勪欢' }}</span> + <span>{{ toolState.open ? '瀛︿範缁勪欢' : '缁勪欢' }}</span> <div class="text"></div> </div> <div class="menuList"> @@ -367,7 +395,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"> @@ -420,10 +448,10 @@ placement="right" width="120" trigger="click" - v-if="floatingToolData.activeToolData == '鏍囨敞'" + v-if="floatingToolData.activeToolData == '鏍囪'" > <div class="popinnerBox"> - <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'"> + <div class="label" v-if="floatingToolData.activeToolData == '鏍囪'"> <div class="labelItem hover" @click="labelShow('hide')"> <img :src="hide" /> <div>闅愯棌</div> @@ -457,7 +485,6 @@ : 'floatToolItem' " v-else - @click="floatItemHandle(item)" > <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" @@ -467,7 +494,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"> @@ -531,9 +562,9 @@ </div> </div> <template #reference> - <div class="floatToolItem" @click="toolSelectHandle('huabi')"> + <div class="floatToolItem hover" @click="toolSelectHandle('huabi')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="huabi2" alt="" /> </div> <div class="text">鐢荤瑪</div> </div> @@ -541,25 +572,40 @@ </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"> @@ -579,7 +625,7 @@ </div> </div> <template #reference> - <div class="floatToolItem" @click="toolSelectHandle('wenzi')"> + <div class="floatToolItem hover" @click="toolSelectHandle('wenzi')"> <div class="imgBox"> <img :src="wenzi2" alt="" /> </div> @@ -589,25 +635,19 @@ </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 class="graphBox"> + <div class="graphSelect"> + <div class="flex1"> + <div class="square hover" @click="graphSelect('square')"></div> </div> - <div - :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'" - @click="selectfontSize('16')" - > - 涓� + <div class="flex1"> + <div class="rotundity hover" @click="graphSelect('rotundity')"></div> </div> - <div - :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'" - @click="selectfontSize('18')" - > - 澶� + <div class="flex1"> + <div class="triangle hover" @click="graphSelect('triangle')"></div> + </div> + <div class="flex1"> + <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div> </div> </div> <div class="lineStyle"> @@ -627,7 +667,7 @@ </div> </div> <template #reference> - <div class="floatToolItem" @click="toolSelectHandle('tuxing')"> + <div class="floatToolItem hover" @click="toolSelectHandle('tuxing')"> <div class="imgBox"> <img :src="tuxing" alt="" /> </div> @@ -635,31 +675,31 @@ </div> </template> </el-popover> - <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> - <div class="imgBox"> - <img :src="clearPrevious" alt="" /> - </div> - <div class="text">姗$毊鎿�</div> - </div> - <div class="floatToolItem" @click="toolSelectHandle('chexiao')"> + <!-- <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> <div class="imgBox"> <img :src="clear" alt="" /> </div> + <div class="text">姗$毊鎿�</div> + </div> --> + <div class="floatToolItem hover" @click="toolSelectHandle('chexiao')"> + <div class="imgBox"> + <img :src="clearPrevious" alt="" /> + </div> <div class="text">鎾ら攢</div> </div> - <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> + <!-- <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> --> + <div class="floatToolItem hover" @click="toolSelectHandle('qingchu')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="qingchu2" alt="" /> </div> <div class="text">娓呴櫎</div> </div> - <div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')"> + <div class="floatToolItem layOutTool hover" @click="toolSelectHandle('tuichu')"> <div class="imgBox"> <img :src="tuichu" alt="" /> </div> @@ -719,6 +759,14 @@ <vue-office-docx :src="testWord" /> </div> </el-dialog> + <!-- 鍥剧墖 --> + <el-image-viewer + v-if="confirmDialog" + :zoom-rate="1.2" + @close="closePreview" + :initial-index="previewIndex" + :url-list="imgPreviewList" + /> <el-dialog title="娣诲姞绗旇" align-center @@ -749,21 +797,10 @@ <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> - <el-dialog - align-center - v-model="confirmDialog" - width="60%" - :closeOnClickModal="false" - title="鍥剧墖" - class="resourDialog" - > - <div class="imgUrlBox"> - <img :src="imgUrl" mode="aspectFill" /> - </div> </el-dialog> <el-dialog title="淇濆瓨鎴浘" @@ -779,16 +816,18 @@ <template #footer> <span class="dialog-footer"> <el-button @click="screenshotClose">鍙� 娑�</el-button> - <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading">纭� 瀹�</el-button> + <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading" + >纭� 瀹�</el-button + > </span> </template> </el-dialog> - <el-dialog title="鐧惧害鐧剧" align-center v-model="baiduVisible" width="60%" class="myDialogs"> + <el-dialog title="鐧惧害鐧剧" align-center v-model="baiduVisible" width="80%" class="baiduDialog"> <div class="wendabox"> - <iframe :src="'https://baike.baidu.com/item/' + selectText" frameborder="0"></iframe> + <iframe :src="'https://baike.baidu.com/item/' + dialogToolData.txt" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="26%" class="myDialogs"> + <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="60%" class="myDialogs"> <div class="wendabox"> <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe> </div> @@ -796,14 +835,14 @@ <el-dialog title="璇嶅吀" align-center v-model="cidianVisible" width="60%" class="myDialogs"> <div class="wendabox"> <!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> --> - <dictionary :searchCon="selectText" /> + <dictionary :searchCon="dialogToolData.txt" /> </div> </el-dialog> <el-dialog title="GGB鍑芥暟宸ュ叿" align-center v-model="functionVisible" - width="60%" + width="80%" class="myDialogs" > <div class="wendabox"> @@ -824,7 +863,7 @@ <script setup lang="ts"> import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' -import { ctxUrl, resourceUrl, requestCtx } from '@/assets/js/config' +import { ctxUrl } from '@/assets/js/config' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() @@ -891,6 +930,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' @@ -937,14 +978,11 @@ 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) +const bookConfig = ref({}) const activeCatalog = ref() onMounted(() => { - getCatalogueData() - getResourceData() setTimeout(() => { canvasWith.value = document.querySelector('.content-box').offsetWidth canvasheight.value = document.querySelector('.content-box').offsetHeight @@ -953,6 +991,7 @@ menuState.open = false toolState.open = false } + brushBoxLeft.value = (screenWidth.value - 450) / 2 window.onresize = () => { return (() => { screenWidth.value = @@ -971,8 +1010,6 @@ window.qiankunActions.onGlobalStateChange((state, prev) => { console.log('鐖跺眰state鍙樺寲', state) - bookName.value = state.bookName - bookId.value = state.bookId window.qiankunState = state }) @@ -983,11 +1020,22 @@ windowSelection: (data) => { // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 console.log(data, '瀛愬簲鐢ㄩ�夋嫨') - if(data.txt){ + if (data.txt) { getSelection(data) - }else{ + } else { showToolBox.value = false + lineDelete.showLineDelete = false + toolActive.value = '' + lineDelete.top = data.y + 20 + lineDelete.left = data.x } + }, + getBookConfig: (data) => { + console.log(data, '鍥句功閰嶇疆') + bookConfig.value = data.bookConfig + getCatalogueData() + getResourceData() + getTextbookComponents() }, catalogChange: (data) => { activeCatalog.value = data.showCatalogList @@ -995,15 +1043,10 @@ console.log(data, '绔犺妭鍒囨崲锛氱洰鍓嶆樉绀虹殑涓変釜绔犺妭') }, pageChange: (data) => { - // { - // page: 100, - // catalog: 5, - // catalogId: "", - // catalogName: "", - // } + headerData.process = Number(data.page) + currentChapter.value = data.catalog console.log(data, '椤甸潰鍒囨崲锛氱洰鍓嶆樉绀洪〉闈㈠拰瀵瑰簲鐨勭珷鑺備俊鎭�') - }, - + } }) // 璋冪敤瀛愬眰鏂规硶 // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) @@ -1016,28 +1059,26 @@ if (screenWidth.value < 1180) { menuState.open = false toolState.open = false + floatingToolData.elLeft = 100 + } else { + floatingToolData.elLeft = 300 } } ) -watch( - () => bookId.value, - (val) => { - // getNotesList() // 鑾峰彇绗旇 - // getlineHeightList() //鑾峰彇楂樹寒 - // getScribeList() //鑾峰彇鍒掔嚎 - // getScreenshotList() //鎴浘 - } -) +//鑾峰彇褰撳墠涔︾睄鎵�闇�缁勪欢 +const getTextbookComponents = () => {} + //鑾峰彇鐩綍 const catalogueData = ref([]) const getCatalogueData = () => { axios - .get(resourceUrl + '/1/information.json?t=123') + .get(bookConfig.value.resourceUrl + '/1/information.json') .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 }) .catch(function (error) { console.log(error) @@ -1045,72 +1086,219 @@ } const defaultProps = { children: 'children', - label: 'label' + label: 'label', + page: 'page' } +const filterNode = (value, data) => { + if (!value) return true + return data.label.indexOf(value) !== -1 +} + const handleNodeClick = (data) => { - document.getElementById(data.id).scrollIntoView() + console.log(data) + headerData.process = data.start + if (window.qiankunState && window.qiankunState.gotoPage) + window.qiankunState.gotoPage(data.chapter, data.start) } //鑾峰彇璧勬簮 //璧勬簮鍒嗙被 -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 classifySelectList = ref() +//璧勬簮绫诲瀷 +const resourceType = ref('default') //榛樿/鏁欏笀 +const activeClassify = ref('') const searchShow = ref(true) -const resourceData = ref({}) +const defaultResourceList = ref([]) +const teacherResourceList = ref([]) const resourceDataList = ref([]) -const resourceImgList = ref([]) -const resourceVideoList = ref([]) -const resourceAudioList = ref([]) -const resourceDocList = ref([]) const resourVisble = ref(false) -const resourType = ref('') +const resourType = ref('') //璧勬簮绫诲瀷鍥剧墖/闊抽 const testVideo = ref('') //瑙嗛閾炬帴 const testWord = ref('') //word閾炬帴 + const getResourceData = () => { axios - .get(resourceUrl + '/1/resource.json') + .get(bookConfig.value.resourceUrl + '/1/resource.json?t=12') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 if (json.length > 0) { + defaultResourceList.value = [] + teacherResourceList.value = [] + // 鑾峰彇鏁扮粍涓墍鏈夊璞$殑age灞炴�х殑鏁伴噺 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) + if (resourceType.value == 'default') { + if (item.isTeacherResource == '鍚�') { + defaultResourceList.value.push(item) + } } else { - resourceDocList.value.push(item) + if (item.isTeacherResource == '鏄�') { + teacherResourceList.value.push(item) + } } }) + if (defaultResourceList.value.length > 0) { + let imgCount = 0 + let audioCount = 0 + let videoCount = 0 + let exercisesCount = 0 + let otherCount = 0 + resourceDataList.value = [] + defaultResourceList.value.forEach((resItem) => { + if (resItem.resourceType == '鍥剧墖') { + if (activeClassify.value == 'image') { + resourceDataList.value.push(resItem) + } + imgCount++ + } else if (resItem.resourceType == '闊抽') { + if (activeClassify.value == 'audio') { + resourceDataList.value.push(resItem) + } + resourceDataList.value.push(resItem) + audioCount++ + } else if (resItem.resourceType == '瑙嗛') { + if (activeClassify.value == 'video') { + resourceDataList.value.push(resItem) + } + videoCount++ + } else if (resItem.resourceType == '涔犻') { + if (activeClassify.value == 'exercises') { + resourceDataList.value.push(resItem) + } + exercisesCount++ + } else { + if (activeClassify.value == 'other') { + resourceDataList.value.push(resItem) + } + otherCount++ + } + }) + classifySelectList.value = [] + if (imgCount > 0) { + classifySelectList.value.push({ + title: '鍥剧墖', + count: imgCount, + key: 'image' + }) + } + if (audioCount > 0) { + classifySelectList.value.push({ + title: '闊抽', + count: audioCount, + key: 'audio' + }) + } + if (videoCount > 0) { + classifySelectList.value.push({ + title: '瑙嗛', + count: videoCount, + key: 'video' + }) + } + if (exercisesCount > 0) { + classifySelectList.value.push({ + title: '涔犻', + count: exercisesCount, + key: 'exercises' + }) + } + if (otherCount > 0) { + classifySelectList.value.push({ + title: '鍏朵粬', + count: otherCount, + key: 'other' + }) + } + if (!activeClassify.value) { + activeClassify.value = classifySelectList.value[0].key + defaultResourceList.value.forEach((resItem1) => { + if (resItem1.resourceType == classifySelectList.value[0].title) { + resourceDataList.value.push(resItem1) + } + }) + } + } else { + let imgCount = 0 + let audioCount = 0 + let videoCount = 0 + let exercisesCount = 0 + let otherCount = 0 + resourceDataList.value = [] + teacherResourceList.value.forEach((resItem) => { + if (resItem.resourceType == '鍥剧墖') { + if (activeClassify.value == 'image') { + resourceDataList.value.push(resItem) + } + imgCount++ + } else if (resItem.resourceType == '闊抽') { + if (activeClassify.value == 'audio') { + resourceDataList.value.push(resItem) + } + resourceDataList.value.push(resItem) + audioCount++ + } else if (resItem.resourceType == '瑙嗛') { + if (activeClassify.value == 'video') { + resourceDataList.value.push(resItem) + } + videoCount++ + } else if (resItem.resourceType == '涔犻') { + if (activeClassify.value == 'exercises') { + resourceDataList.value.push(resItem) + } + exercisesCount++ + } else { + if (activeClassify.value == 'other') { + resourceDataList.value.push(resItem) + } + otherCount++ + } + }) + classifySelectList.value = [] + if (imgCount > 0) { + classifySelectList.value.push({ + title: '鍥剧墖', + count: imgCount, + key: 'image' + }) + } + if (audioCount > 0) { + classifySelectList.value.push({ + title: '闊抽', + count: audioCount, + key: 'audio' + }) + } + if (videoCount > 0) { + classifySelectList.value.push({ + title: '瑙嗛', + count: videoCount, + key: 'video' + }) + } + if (exercisesCount > 0) { + classifySelectList.value.push({ + title: '涔犻', + count: exercisesCount, + key: 'exercises' + }) + } + if (otherCount > 0) { + classifySelectList.value.push({ + title: '鍏朵粬', + count: otherCount, + key: 'other' + }) + } + if (!activeClassify.value) { + activeClassify.value = classifySelectList.value[0].key + teacherResourceList.value.forEach((resItem1) => { + if (resItem1.resourceType == classifySelectList.value[0].title) { + resourceDataList.value.push(resItem1) + } + }) + } + } } - 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) @@ -1118,34 +1306,32 @@ } const goResourceDetail = (data) => { - resourType.value = data.fileType - if (data.fileType == '瑙嗛') { + console.log(data) + resourType.value = data.resourceType + if (data.resourceType == '瑙嗛') { 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 + testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + } else if (data.resourceType == 'word') { + testWord.value = bookConfig.value.resourceUrl + '/resourceData/' + data.name + } else { + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination)) + } } } +//璧勬簮绫诲瀷閫夋嫨榛樿/鏁欏笀 +const selectResourceType = (type) => { + resourceType.value = type + searchText.value = '' + getResourceData() +} +//璧勬簮绫诲瀷鍥剧墖/瑙嗛/闊抽/涔犻/鍏朵粬 const classifyClick = (item) => { activeClassify.value = item.key resourceDataList.value = [] searchText.value = '' - switch (item.key) { - 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 - } + getResourceData() } const searchBtn = () => { if (searchShow.value) { @@ -1177,31 +1363,33 @@ icon: jietu }, { - name: '鏍囩', + name: '涔︾', icon: biaoqian } ]) // 閫変腑鑿滃崟 -const activeMenu = ref(0) -//璧勬簮绫诲瀷 -const resourceType = ref('default') +const activeMenu = ref('鐩綍') + // 鑿滃崟鐐瑰嚮 -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 '涔︾': + getReMarkList() break } } @@ -1221,9 +1409,6 @@ // } } -const selectResourceType = (type) => { - resourceType.value = type -} const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, @@ -1234,19 +1419,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: [ @@ -1271,7 +1456,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 @@ -1283,29 +1470,40 @@ } else { menuState.notesColor = 'all' } - // getNotesList() + getNotesList() } +const catalogTree = ref() const searchBook = async () => { - 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) { + resourceDataList.value.push(item) + } + }) + } else { + getResourceData() + } + break + case '鐭ヨ瘑鍥捐氨': + break + case '鎴浘': + getScreenshotList() + break + case '涔︾': + getReMarkList() + break } } @@ -1427,12 +1625,12 @@ { activeIcon: biaozhu1, icon: biaozhu, - name: '鏍囨敞' + name: '鏍囪' }, { activeIcon: biaoqian1, icon: biaoqianw, - name: '鏍囩' + name: '涔︾' }, { activeIcon: jieping1, @@ -1446,11 +1644,7 @@ elLeft: 400, elTop: 300, startclientx: 0, - startclienty: 0, - fontSizeActive: '16', - thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏 - lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨� - lineColorActive: '#333' //鐢荤瑪閫変腑绾块鑹� + startclienty: 0 }) //鐢诲竷 @@ -1507,18 +1701,24 @@ const urlData = ref('') //鎴浘base64 const screenshotList = ref([]) const screenshotData = ref([]) +const imgPreviewList = ref([]) +const previewIndex = ref(0) +const showDelete = ref(null) +const isUpdateImg = ref(false) +const screenshotId = ref(0) //娴獥宸ュ叿鏍忕偣鍑讳簨浠� const floatItemHandle = (item) => { floatingToolData.activeToolData = item.name - switch (item.name) { + canvasShow.value = false + switch (floatingToolData.activeToolData) { case '鐢荤瑪': canvasShow.value = true toolSelectData.activeTool = 'huabi' break - case '鏍囨敞': + case '鏍囪': break - case '鏍囩': + case '涔︾': reMark() break case '鎴睆': @@ -1541,13 +1741,15 @@ //鐢荤瑪鎿嶄綔鏍忎簨浠� const toolSelectData = reactive({ activeTool: '', - fontSizeActive: '16', + fontSizeActive: '16', // 鏂囧瓧鎿嶄綔鏂囧瓧澶у皬 thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏 lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨� - lineColorActive: '#333' //鐢荤瑪閫変腑绾块鑹� + lineColorActive: '#333', //鐢荤瑪閫変腑绾块鑹� + graphType: '' //鍥惧舰绫诲瀷锛屾柟褰紝鍦嗗舰... }) const toolSelectHandle = (title) => { toolSelectData.activeTool = title + toolSelectData.lineColorActive = '' switch (title) { case 'huabi': init() @@ -1594,14 +1796,117 @@ toolSelectData.fontSizeActive = str } -//鏍囨敞鏄剧ず闅愯棌 -const labelShow = (str) => {} - -//鏍囩 -const reMark =() => { - - +//閫夋嫨鍥惧舰 +const graphSelect = (type) => { + toolSelectData.graphType = type + switch (type) { + case 'square': + break + case 'rotundity': + break + case 'triangle': + break + case 'lineSegment': + break + } } +//鏍囪鏄剧ず闅愯棌 +const labelShow = (str) => { + console.log(str, '鏍囪') + if (str == 'hide') { + if (window.qiankunState && window.qiankunState.delSign) { + window.qiankunState.delSign({ ids: [] }) + } + } +} + +//涔︾ +const currentChapter = ref(0) +const reMarkList = ref([]) +const reMarkData = ref([]) +const reMarkId = ref([]) + +const reMark = () => { + let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value)) + console.log(chapterData) + reMarkData.value.push({ + id: toolClass.uuid(8), + createDate: new Date(), + page: headerData.process, + chapterNum: currentChapter.value, + chapterName: chapterData.label + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'reMark', + key: bookConfig.value.bookId, + value: JSON.stringify(reMarkData.value) + } + ] + } + }) + .then((res) => { + floatingToolData.activeToolData = '' + getReMarkList() + }) + .catch(function (error) {}) +} +const getReMarkList = () => { + reMarkList.value = [] + reMarkData.value = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'reMark', + keys: [bookConfig.value.bookId] + } + }).then((res) => { + if (res && res.length > 0 && res[0].value) { + reMarkData.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) { + reMarkList.value.push(item) + } + } else { + reMarkList.value.push(item) + } + }) + console.log(reMarkList.value, '124') + } + }) +} +//鍒犻櫎涔︾ +const deleteReMark = (item) => { + let list = reMarkList.value.filter((itemData) => itemData.id !== item.id) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'reMark', + key: bookConfig.value.bookId, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎涔︾鎴愬姛!', + type: 'success' + }) + getReMarkList() + }) +} + //鎴浘 //鎴浘浜嬩欢 function jitT() { @@ -1615,6 +1920,7 @@ //纭鍥炶皟 const callback = (val: any) => { screenshotVisble.value = true + nameData.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss') urlData.value = val.base64 } //鍙栨秷鍥炶皟 @@ -1625,11 +1931,23 @@ //淇濆瓨鎴浘 const addScreenshot = () => { if (nameData.value) { - screenshotData.value.push({ - createDate: new Date(), - imgUrl: urlData.value, - name: nameData.value - }) + if (isUpdateImg.value) { + screenshotData.value = [] + screenshotList.value.forEach((itemNote) => { + if ((itemNote.id = screenshotId.value)) { + itemNote.name = nameData.value + } + }) + screenshotData.value = screenshotList.value + } else { + screenshotData.value.push({ + id: toolClass.uuid(8), + createDate: new Date(), + imgUrl: urlData.value, + name: nameData.value + }) + } + screenshotLoading.value = true request({ url: '/identity/api/ApiAppUserSetKey', @@ -1638,21 +1956,24 @@ setKeyRequests: [ { domain: 'screenshot', - key: bookId.value, + key: bookConfig.value.bookId, value: JSON.stringify(screenshotData.value) } ] } - }).then((res) => { - screenshotLoading.value = false - getScreenshotList() - nameData.value = '' - urlData.value = '' - floatingToolData.activeToolData = '' - screenshotVisble.value = false - }).catch(function (error) { - screenshotLoading.value = false }) + .then((res) => { + screenshotLoading.value = false + getScreenshotList() + nameData.value = '' + urlData.value = '' + floatingToolData.activeToolData = '' + screenshotVisble.value = false + isUpdateImg.value = false + }) + .catch(function (error) { + screenshotLoading.value = false + }) } else { ElMessage.error('鎴浘鍚嶇О涓嶈兘涓虹┖!') } @@ -1662,51 +1983,86 @@ } const getScreenshotList = () => { + screenshotData.value = [] + screenshotList.value = [] request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { domain: 'screenshot', - keys: [bookId.value] + keys: [bookConfig.value.bookId] } }).then((res) => { if (res && res.length > 0 && res[0].value) { - screenshotList.value = JSON.parse(res[0].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) + imgPreviewList.value.push(item.imgUrl) + } + } else { + screenshotList.value.push(item) + imgPreviewList.value.push(item.imgUrl) + } + }) } }) } //鏌ョ湅鎴浘 -const getCapture = (item) => { +const getCapture = (item, index) => { imgUrl.value = item.imgUrl + previewIndex.value = index confirmDialog.value = true } +const closePreview = () => { + imgPreviewList.value = [] + confirmDialog.value = false +} +// 缂栬緫鎴浘鍚嶇О +const updateScreenshot = (item) => { + nameData.value = item.name + screenshotId.value = item.id + isUpdateImg.value = true + screenshotVisble.value = true +} + //鍒犻櫎鎴浘 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() + let list = screenshotList.value.filter((itemData) => itemData.id !== item.id) + ElMessageBox.confirm('纭畾瑕佸垹闄ゆ鎴浘鍚楋紵', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + autofocus: false, + type: 'warning' }) + .then(() => { + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'screenshot', + key: bookConfig.value.bookId, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎鎴浘鎴愬姛!', + type: 'success' + }) + getScreenshotList() + }) + }) + .catch(() => {}) } //閫変腑鏂囧瓧宸ュ叿鏍� -const selectText = ref('') //閫変腑鏂囧瓧 const showToolBox = ref(false) const dialogToolData = reactive({ left: 500, @@ -1722,6 +2078,7 @@ ///鍐呭閫変腑 const getSelection = (data) => { if (data.txt) { + toolActive.value = '' dialogToolData.txt = data.txt dialogToolData.page = data.page dialogToolData.chapter = data.chapterNum @@ -1742,7 +2099,7 @@ { icon: fuzhi, activeIcon: fuzhi1, name: '澶嶅埗' }, { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI闃呰' }, { icon: cidian2, activeIcon: cidian1, name: '璇嶅吀' }, - { icon: baidu, activeIcon: cidian1, name: '鐧剧' } + { icon: baidu, activeIcon: baidu, name: '鐧剧' } // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '璇煶闃呰' } // { icon: cidian2, activeIcon: cidian1, name: '缈昏瘧' } ]) @@ -1771,7 +2128,9 @@ //绗旇寮圭獥 const addNoteVisble = ref(false) +const isUpdate = ref(false) const formData = reactive({ + id: '', desc: '' }) //绗旇寮圭獥鍏抽棴 @@ -1857,9 +2216,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 @@ -1875,7 +2235,7 @@ case '澶嶅埗': try { //澶嶅埗 - await toClipboard(selectText.value) + await toClipboard(dialogToolData.txt) //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣� ElMessage({ message: '澶嶅埗鎴愬姛', @@ -1891,6 +2251,7 @@ cidianVisible.value = true break case '鐧剧': + console.log('https://baike.baidu.com/item/' + dialogToolData.txt) baiduVisible.value = true break } @@ -1910,23 +2271,27 @@ let data = null switch (toolActive.value) { case '楂樹寒': - dom = 'highLightData-' + bookId.value + dom = 'highLightData-' + bookConfig.value.bookId data = dialogToolData.lineHeight[dialogToolData.chapter] + if (!data) data = [] data.push({ id: toolClass.uuid(8), txt: dialogToolData.txt, page: dialogToolData.page, + chapterNum: dialogToolData.chapter, type: 'Highlight', color: colorActive.value }) break case '鍒掔嚎': - dom = 'underline-' + bookId.value + dom = 'underline-' + bookConfig.value.bookId data = dialogToolData.scribeList[dialogToolData.chapter] + if (!data) data = [] data.push({ id: toolClass.uuid(8), txt: dialogToolData.txt, page: dialogToolData.page, + chapterNum: dialogToolData.chapter, type: 'Dashing', color: colorActive.value }) @@ -1934,24 +2299,26 @@ case '绗旇': if (!formData.desc.replace(/^\s*|\s*$/g, '')) { ElMessage.error('绗旇鍐呭涓嶈兘涓虹┖!') - return + return } if (!noteColorActive.value) { ElMessage.error('璇烽�夋嫨绗旇棰滆壊!') return } - dom = 'notes-' + bookId.value - data = dialogToolData.notesList.length != 0 ? dialogToolData.notesList[dialogToolData.chapter] : [] + dom = 'notes-' + bookConfig.value.bookId + 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(), note: formData.desc.replace(/^\s*|\s*$/g, '') }) - + break } request({ @@ -1973,17 +2340,16 @@ noteColorActive.value = '' toolActive.value = '' getSignData() + getNotesList() }) } - - const getSignData = () => { request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'highLightData-' + bookId.value, + domain: 'highLightData-' + bookConfig.value.bookId, keys: activeCatalog.value.map((item) => item + '') } }).then((res) => { @@ -2006,7 +2372,7 @@ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'underline-' + bookId.value, + domain: 'underline-' + bookConfig.value.bookId, keys: activeCatalog.value.map((item) => item + '') } }).then((res) => { @@ -2016,6 +2382,7 @@ const data = JSON.parse(item.value) // 鍌ㄥ�� dialogToolData.scribeList[item.key] = data + // 娓叉煋 for (let j = 0; j < data.length; j++) { const citem = data[j] @@ -2029,7 +2396,7 @@ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'notes-' + bookId.value, + domain: 'notes-' + bookConfig.value.bookId, keys: activeCatalog.value.map((item) => item + '') } }).then((res) => { @@ -2038,9 +2405,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] @@ -2048,6 +2413,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-' + bookConfig.value.bookId, + 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') } }) } @@ -2062,32 +2482,26 @@ }) // 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� -window.signClick = (type, id)=>{ - console.log("signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�", type, id); - // if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[id]}) - 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 +window.signClick = (type, id, chapterNum) => { + console.log('signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�', type, id, chapterNum) + dialogToolData.chapter = chapterNum + if (type == 'Note') { + 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 - }else{ + isUpdate.value = true + } else { lineDelete.showLineDelete = true lineDelete.deleteType = type lineDelete.id = id + 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 @@ -2095,18 +2509,15 @@ let data = null switch (type) { case 'Highlight': - dom = 'highLightData-' + bookId.value + dom = 'highLightData-' + bookConfig.value.bookId data = dialogToolData.lineHeight break case 'Dashing': - dom = 'underline-' + bookId.value + dom = 'underline-' + bookConfig.value.bookId 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', @@ -2120,117 +2531,96 @@ ] } }).then((res) => { - if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[ids]}) + 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) -} - -//绗旇缂栬緫 -const update = (item, type) => { - dialogToolData.notesList.splice( - dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText), - 1 - ) - dialogToolData.txt = item.txt - dialogToolData.page = item.page - dialogToolData.chapter = item.chapterNum - noteColorActive.value = item.color - dialogToolData.chapter = item.chapter - formData.desc = item.note - addNoteVisble.value = true -} - -//鍒犻櫎 -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() - }) + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) } } +//鑿滃崟绗旇缂栬緫 +const update = (item) => { + console.log(item) + dialogToolData.chapter = item.chapterNum + noteColorActive.value = item.color + 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 + itemNote.color = noteColorActive.value + } + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookConfig.value.bookId, + key: dialogToolData.chapter, + value: JSON.stringify(data.noteList) + } + ] + } + }).then((res) => { + addNoteVisble.value = false + isUpdate.value = false + getNotesList() + getSignData() + }) +} + +//鑿滃崟鍒犻櫎绗旇 +const deleteBtn = (item) => { + let data = scribeData.noteList.find((item1) => item1.chapter == Number(item.chapterNum)) + // 绉婚櫎 + let list = data.noteList.filter((itemData) => itemData.id !== item.id) + ElMessageBox.confirm('纭畾瑕佸垹闄ゆ绗旇鍚楋紵', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + autofocus: false, + type: 'warning' + }) + .then(() => { + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookConfig.value.bookId, + 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] }) + } + }) + }) + .catch(() => {}) +} //鍐呭鍖哄煙椤堕儴鏄剧ず @@ -2240,6 +2630,7 @@ minutes: 0, hours: 0, process: 0, + totlePage: 0, pageSize: 100 }) //涓婅鏃堕暱璁℃椂鍣� @@ -2271,16 +2662,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> @@ -2390,7 +2786,7 @@ align-items: center; } .resourceBox { - padding: 15px 0; + padding: 10px 0; margin: 0 20px; border-bottom: 1px solid rgba(204, 204, 204, 0.32); .classification { @@ -2407,10 +2803,13 @@ } .count { width: 35px; - margin: 5px auto; + margin: 0 auto; + margin-top: 5px; border-radius: 10px; background: #fff; color: #c8c8c8; + height: 18px; + font-size: 12px; } .activeClassify, .classifyItem:hover { @@ -2437,6 +2836,7 @@ } .inputBox { margin-top: 10px; + width: 100% !important; } } .resourceTab { @@ -2470,11 +2870,13 @@ } } .inputBox { + width: 85%; .custom-input { border: 1px solid #0093ff !important; border-radius: 50px; overflow: hidden; background: #fff; + height: 34px; } .is-focus, .el-input__wrapper { @@ -2567,14 +2969,7 @@ .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; } } } @@ -2595,13 +2990,23 @@ } .deleteBox { position: absolute; - top: 2px; - right: 2px; - width: 20px; - height: 20px; - background: rgba(44, 44, 44, 0.3); + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(44, 44, 44, 0.6); text-align: center; padding: 2px; + .delImg { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + .icon { + position: static; + margin: 5px; + } + } } // .capture { // width: 100%; @@ -2609,9 +3014,8 @@ .captureName { height: 20px; line-height: 20px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; + width: 120px; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; @@ -2680,6 +3084,27 @@ } } } + .chapterName { + margin: 15px; + } + .reMarkItem { + margin: 15px; + background: #fff; + border-radius: 10px; + padding: 10px; + display: flex; + .reMarkCon { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 8px; + } + .deleteReMarkImg { + display: flex; + align-items: center; + } + } } } .menuStateBox { @@ -2691,9 +3116,10 @@ position: fixed; line-height: 22px; top: 50%; - left: 370px; + left: 395px; text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); + z-index: 2; img { height: 10px; width: 18px; @@ -2708,6 +3134,7 @@ padding: 0 20px; background: #fff; display: flex; + z-index: 99; align-items: center; justify-content: space-between; .classTime { @@ -2728,8 +3155,9 @@ .progress { text-align: center; .bookName { - font-weight: bold; - margin-bottom: 3px; + font-weight: 800; + margin-bottom: 5px; + color: #333; } } .rightBox { @@ -2738,14 +3166,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; @@ -2762,6 +3195,7 @@ .pageBox-content { height: calc(100% - 57px); background: #fbf9f4; + padding: 10px 0; .content-box { height: 100%; position: relative; @@ -2829,18 +3263,20 @@ border-radius: 3px 0px 0px 3px; border: 1px solid #bce3ff; position: absolute; - line-height: 22px; top: 50%; - right: 50px; - text-align: center; + right: 67px; 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; } } .right { - right: 184px !important; + right: 215px !important; border-radius: 0px 3px 3px 0px !important; } .classRoomBox { @@ -2910,7 +3346,7 @@ height: 310px; top: 300px; left: 450px; - z-index: 99; + z-index: 2000; border-radius: 10px; padding: 5px; overflow: hidden; @@ -2921,6 +3357,7 @@ align-items: center; border-radius: 5px; color: #fff; + cursor: pointer; img { margin-right: 8px; } @@ -2937,7 +3374,7 @@ .brushBox { position: fixed; - left: 500px; + // left: 40%; bottom: 20px; z-index: 99; border-radius: 5px; @@ -2950,14 +3387,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; @@ -3052,7 +3490,8 @@ .myDialogs, .myNoteDialogs, -.resourDialog { +.resourDialog, +.baiduDialog { padding: 0 !important; border-radius: 10px !important; overflow: hidden; @@ -3090,6 +3529,10 @@ .screenshotDialog { width: 400px !important; } +.baiduDialog { + width: 90vw; + height: 90vh; +} .noteColorSelectBox { margin-top: 10px; width: 190px; -- Gitblit v1.9.1