| | |
| | | <div v-else> |
| | | <div class="layout hover" @click="goLogin">登录</div> |
| | | </div> |
| | | <!-- <div> |
| | | <div class="layout hover" @click="openFormulaDialog">公式</div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <!-- 菜单 --> |
| | | <div class="menuBox"> |
| | | <div v-for="(item, index) in menuData" :key="index"> |
| | | <div :class="['menuItem', activeMenu == item.name ? 'active' : '']" @click="menuItemClick(item.name)" |
| | | v-if="item.isShow"> |
| | | <div |
| | | :class="['menuItem', activeMenu == item.name ? 'active' : '']" |
| | | @click="menuItemClick(item.name)" |
| | | v-if="item.isShow" |
| | | > |
| | | <div class="menuIcon imgBox"> |
| | | <img :src="item.icon" /> |
| | | </div> |
| | |
| | | <el-form-item label="字体大小"> |
| | | <div class="lineStyle"> |
| | | <div class="lineTypeBox"> |
| | | <div v-for="item in settingForm.fontSizeList" :key="item.key" :class="settingForm.fontSizeActive == item.key |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="fontSizeSelect(item)"> |
| | | <div |
| | | v-for="item in settingForm.fontSizeList" |
| | | :key="item.key" |
| | | :class=" |
| | | settingForm.fontSizeActive == item.key |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " |
| | | @click="fontSizeSelect(item)" |
| | | > |
| | | {{ item.lable }} |
| | | <div class="activeIcon" v-if="settingForm.fontSizeActive == item.key"> |
| | | <img :src="xuanzhong" /> |
| | |
| | | </div> --> |
| | | <el-form-item label="底色"> |
| | | <div class="bgColor"> |
| | | <div v-for="item in settingForm.bgColorList" :key="item.key" class="flex1 hover" |
| | | @click="bgColorSelect(item)"> |
| | | <div :style="{ |
| | | background: item.key, |
| | | 'border-color': |
| | | item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB' |
| | | }" class="scribeItem"> |
| | | <div |
| | | v-for="item in settingForm.bgColorList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="bgColorSelect(item)" |
| | | > |
| | | <div |
| | | :style="{ |
| | | background: item.key, |
| | | 'border-color': |
| | | item.key == settingForm.bgColorActive ? '#0093FF' : '#EBEBEB' |
| | | }" |
| | | class="scribeItem" |
| | | > |
| | | <img :src="xuanzhong1" v-if="item.key == settingForm.bgColorActive" /> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="menuContent" v-if="menuState.open"> |
| | | <div class="searchBox"> |
| | | <div class="inputBox" v-if="activeMenu !== '资源' && activeMenu !== '题库'"> |
| | | <el-input class="custom-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="searchBook" clearable |
| | | @clear="handleClear"> |
| | | <el-input |
| | | class="custom-input" |
| | | placeholder="请输入内容" |
| | | v-model="searchText" |
| | | @keyup.enter="searchBook" |
| | | clearable |
| | | @clear="handleClear" |
| | | > |
| | | <template #prefix> |
| | | <img :src="listSearch" @click="searchBook" class="hover" /> |
| | | </template> |
| | |
| | | <div>默认资源</div> |
| | | <div :class="resourceType == 'default' ? 'text' : 'line'"></div> |
| | | </div> |
| | | <hr class="hr" /> |
| | | <div class="tabItem hover" @click="selectResourceType('teacher')"> |
| | | <hr class="hr" v-if="userInfo.role == 'Teacher'"/> |
| | | <div class="tabItem hover" @click="selectResourceType('teacher')" v-if="userInfo.role == 'Teacher'"> |
| | | <div>教师资源</div> |
| | | <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div v-if="activeMenu == '题库'" class="resourceTab"> |
| | | <div class="tabItem hover" @click="selectExercisesType('exercises')" |
| | | v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1"> |
| | | <div |
| | | class="tabItem hover" |
| | | @click="selectExercisesType('exercises')" |
| | | v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1" |
| | | > |
| | | <div>习题</div> |
| | | <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div> |
| | | </div> |
| | | <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" /> |
| | | <div class="tabItem hover" @click="selectExercisesType('additional')" |
| | | v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"> |
| | | <div |
| | | class="tabItem hover" |
| | | @click="selectExercisesType('additional')" |
| | | v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" |
| | | > |
| | | <div>附加题</div> |
| | | <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div> |
| | | </div> |
| | |
| | | </div> |
| | | <!-- 目录 --> |
| | | <div class="menuList" v-if="activeMenu == '目录'" v-loading="listLoading"> |
| | | <el-tree ref="catalogTree" default-expand-all="true" :expand-on-click-node="false" node-key="start" |
| | | highlight-current :data="catalogueData" :props="defaultProps" v-if="catalogueData.length > 0" |
| | | @node-click="handleNodeClick" :filter-node-method="filterNode"> |
| | | <el-tree |
| | | ref="catalogTree" |
| | | default-expand-all="true" |
| | | :expand-on-click-node="false" |
| | | node-key="start" |
| | | highlight-current |
| | | :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> |
| | |
| | | <div v-if="allSearchReault.length > 0" class="allSearchList"> |
| | | <div v-for="(reault, index) in allSearchReault" :key="index"> |
| | | <div class="chapterName"> |
| | | <el-icon @click="searchClose(index)" |
| | | v-if="searchReaultData.isShow && searchReaultData.openIndex == index" class="hover"> |
| | | <el-icon |
| | | @click="searchClose(index)" |
| | | v-if="searchReaultData.isShow && searchReaultData.openIndex == index" |
| | | class="hover" |
| | | > |
| | | <ArrowDown /> |
| | | </el-icon> |
| | | <el-icon @click="searchOpen(index)" v-else class="hover"> |
| | |
| | | </el-icon> |
| | | <span>{{ reault.chapterName }} ({{ reault.itemList.length }})</span> |
| | | </div> |
| | | <div v-for="(item, index1) in reault.itemList" :key="index1" class="searchItem" |
| | | v-show="searchReaultData.isShow && searchReaultData.openIndex == index"> |
| | | <div |
| | | v-for="(item, index1) in reault.itemList" |
| | | :key="index1" |
| | | class="searchItem" |
| | | v-show="searchReaultData.isShow && searchReaultData.openIndex == index" |
| | | > |
| | | <div class="index">{{ index1 + 1 }}.</div> |
| | | <div class="searchCon hover" @click="goSearchContent(item)" v-html="item.txt1" :title="item.txt"> |
| | | </div> |
| | | <div |
| | | class="searchCon hover" |
| | | @click="goSearchContent(item)" |
| | | v-html="item.txt1" |
| | | :title="item.txt" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="flex1 hover" @click="searchClick('all')"> |
| | | <div :class="menuState.notesColor == 'all' ? ' allActive' : 'all'">全部</div> |
| | | </div> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="searchClick(item)"> |
| | | <div :style="{ background: item.key }" |
| | | :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'"></div> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="searchClick(item)" |
| | | > |
| | | <div |
| | | :style="{ background: item.key }" |
| | | :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div class="list-box"> |
| | | <div v-if="scribeData.noteList.length > 0"> |
| | | <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem"> |
| | | <div class="chapterName"> |
| | | <el-icon @click="noteClose(index)" v-if="scribeData.isShow && scribeData.openIndex == index" |
| | | class="hover"> |
| | | <el-icon |
| | | @click="noteClose(index)" |
| | | v-if="scribeData.isShow && scribeData.openIndex == index" |
| | | class="hover" |
| | | > |
| | | <ArrowDown /> |
| | | </el-icon> |
| | | <el-icon @click="noteOpen(index)" v-else class="hover"> |
| | |
| | | </el-icon> |
| | | <span>{{ noteItem.chapterName }}</span> |
| | | </div> |
| | | <div v-for="(item, index1) in noteItem.noteList" :key="item.key" class="listItem" |
| | | v-show="scribeData.isShow && scribeData.openIndex == index"> |
| | | <div |
| | | v-for="(item, index1) in noteItem.noteList" |
| | | :key="item.key" |
| | | class="listItem" |
| | | v-show="scribeData.isShow && scribeData.openIndex == index" |
| | | > |
| | | <div class="textBox"> |
| | | <div class="title"> |
| | | <div class="title-con"> |
| | | <div class="border-left" :style="{ 'border-right-color': item.color }"></div> |
| | | <div |
| | | class="border-left" |
| | | :style="{ 'border-right-color': item.color }" |
| | | ></div> |
| | | <span>{{ moment(item.createDate).format('YYYY-MM-DD') }}</span> |
| | | </div> |
| | | <div> |
| | |
| | | <img :src="shanchu" @click="deleteBtn(item)" class="hover" /> |
| | | </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="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 class="resourceBox" v-if="activeMenu == '资源'" v-loading="listLoading"> |
| | | <div class="resourceSearchBox" v-if="classifySelectList.length > 0"> |
| | | <div class="classification"> |
| | | <div v-for="item in classifySelectList" :key="item.key" class="flex1 hover" @click="classifyClick(item)"> |
| | | <div :class="item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem' |
| | | "> |
| | | <div |
| | | v-for="item in classifySelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="classifyClick(item)" |
| | | > |
| | | <div |
| | | :class=" |
| | | item.key == activeClassify ? 'activeClassify classifyItem' : 'classifyItem' |
| | | " |
| | | > |
| | | <div class="title">{{ item.title }}</div> |
| | | <div class="count">{{ item.count }}</div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="inputBox" v-if="!searchShow"> |
| | | <el-input class="custom-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="searchBook" |
| | | clearable @clear="handleClear"> |
| | | <el-input |
| | | class="custom-input" |
| | | placeholder="请输入内容" |
| | | v-model="searchText" |
| | | @keyup.enter="searchBook" |
| | | clearable |
| | | @clear="handleClear" |
| | | > |
| | | <template #prefix> |
| | | <img :src="listSearch" @click="searchBook" class="hover" /> |
| | | </template> |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> |
| | | <div class="resourceItem"> |
| | | <div class="resourceImg" @mouseover="showHandle = index" @mouseleave="showHandle = null"> |
| | | <div |
| | | class="resourceImg" |
| | | @mouseover="showHandle = index" |
| | | @mouseleave="showHandle = null" |
| | | > |
| | | <img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'" /> |
| | | <img :src="item.icon" mode="" v-else-if="item.icon && activeClassify != 'image'" /> |
| | | <img |
| | | :src="item.icon" |
| | | mode="" |
| | | v-else-if="item.icon && activeClassify != 'image'" |
| | | /> |
| | | <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> --> |
| | | <!-- <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> --> |
| | | <!-- <el-icon v-else-if="activeClassify == 'video'" size="30" |
| | | ><VideoCamera |
| | | /></el-icon> --> |
| | | <!-- <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> --> |
| | | <img src="@/assets/images/resource/yp-mr.png" v-else-if="activeClassify == 'audio'" /> |
| | | <img src="@/assets/images/resource/sp-mr.png" v-else-if="activeClassify == 'video'" /> |
| | | <img src="@/assets/images/resource/qt-mr.png" v-else-if="activeClassify == 'other'" /> |
| | | <img |
| | | src="@/assets/images/resource/yp-mr.png" |
| | | v-else-if="activeClassify == 'audio'" |
| | | /> |
| | | <img |
| | | src="@/assets/images/resource/sp-mr.png" |
| | | v-else-if="activeClassify == 'video'" |
| | | /> |
| | | <img |
| | | src="@/assets/images/resource/qt-mr.png" |
| | | v-else-if="activeClassify == 'other'" |
| | | /> |
| | | <div class="handleBox" v-if="showHandle == index"> |
| | | <div class="delImg"> |
| | | <el-icon class="icon hover" size="20" @click="JumpPosition(item)" |
| | | v-if="resourceType == 'default'"> |
| | | <el-icon |
| | | class="icon hover" |
| | | size="20" |
| | | @click="JumpPosition(item)" |
| | | v-if="item.pagination" |
| | | > |
| | | <LocationInformation /> |
| | | </el-icon> |
| | | <el-icon @click="goPlay(item)" size="20" class="icon hover" v-if="item.resourceType == '视频'"> |
| | | <el-icon |
| | | @click="goPlay(item)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '视频'" |
| | | > |
| | | <VideoPlay /> |
| | | </el-icon> |
| | | <el-icon @click="goPlay(item, index)" size="20" class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex != index"> |
| | | <el-icon |
| | | @click="goPlay(item, index)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex != index" |
| | | > |
| | | <VideoPlay /> |
| | | </el-icon> |
| | | <el-icon @click="goPause()" size="20" class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex == index"> |
| | | <el-icon |
| | | @click="goPause()" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '音频' && playIndex == index" |
| | | > |
| | | <VideoPause /> |
| | | </el-icon> |
| | | <el-icon @click="getCapture(item, index)" size="20" class="icon hover" |
| | | v-if="item.resourceType == '图片'"> |
| | | <el-icon |
| | | @click="getCapture(item, index)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if="item.resourceType == '图片'" |
| | | > |
| | | <View /> |
| | | </el-icon> |
| | | <el-icon size="20" class="icon hover" @click="goPlay(item)" v-if=" |
| | | !( |
| | | item.resourceType == '视频' || |
| | | item.resourceType == '音频' || |
| | | item.resourceType == '习题' || |
| | | item.resourceType == '图片' |
| | | ) && item.isDownload == '是' |
| | | "> |
| | | <!-- 其他类型预览或直接下载 --> |
| | | <el-icon |
| | | @click="goPlay(item)" |
| | | size="20" |
| | | class="icon hover" |
| | | v-if=" |
| | | item.resourceType != '视频' && |
| | | item.resourceType != '音频' && |
| | | item.resourceType != '图片' |
| | | " |
| | | > |
| | | <View /> |
| | | </el-icon> |
| | | <el-icon |
| | | size="20" |
| | | class="icon hover" |
| | | @click="goDownload(item)" |
| | | v-if="item.isDownload == '是'" |
| | | > |
| | | <Download /> |
| | | </el-icon> |
| | | <!-- 收藏按钮 --> |
| | | <img |
| | | :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart" |
| | | class="icon hover" style="width: 15px;" |
| | | @click="handleCollectResource(item.id, item.md5 ? item.md5 : '', item.resourcePath ? item.resourcePath : '', item.resourceType, item.resourceType == '视频' || '音频' ? 'bits' : 'json', item.resourceName)" /> |
| | | :src=" |
| | | collectResourceList.findIndex((citem) => citem.id == item.id) > -1 |
| | | ? isHeart |
| | | : heart |
| | | " |
| | | class="icon hover" |
| | | style="width: 15px" |
| | | @click=" |
| | | handleCollectResource( |
| | | item.id, |
| | | item.md5 ? item.md5 : '', |
| | | item.resourcePath ? item.resourcePath : '', |
| | | item.resourceType, |
| | | item.resourceType == '视频' || '音频' ? 'bits' : 'json', |
| | | item.resourceName |
| | | ) |
| | | " |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="questionList" v-if="activeMenu == '题库'" v-loading="listLoading"> |
| | | <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"> |
| | | <div |
| | | class="resourceSearchBox" |
| | | v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'" |
| | | > |
| | | <div class="inputBox"> |
| | | <el-input class="custom-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="searchBook" |
| | | clearable @clear="handleClear"> |
| | | <el-input |
| | | class="custom-input" |
| | | placeholder="请输入内容" |
| | | v-model="searchText" |
| | | @keyup.enter="searchBook" |
| | | clearable |
| | | @clear="handleClear" |
| | | > |
| | | <template #prefix> |
| | | <img :src="listSearch" @click="searchBook" class="hover" /> |
| | | </template> |
| | |
| | | <div class="list-box" v-loading="listLoading"> |
| | | <div v-if="questionList.length > 0"> |
| | | <div v-for="(item, index) in questionList" :key="index" class="reMarkItem"> |
| | | <div class="questionCon hover" @click="clickQuestion(exercisesType, item)" :title="item.resourceName"> |
| | | <div |
| | | class="questionCon hover" |
| | | @click="clickQuestion(exercisesType, item)" |
| | | :title="item.resourceName" |
| | | > |
| | | {{ item.resourceName }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if=" |
| | | questionList.length == 0 && |
| | | exercisesType !== 'collection' && |
| | | exercisesType !== 'wrong' |
| | | "> |
| | | <div |
| | | v-if=" |
| | | questionList.length == 0 && |
| | | exercisesType !== 'collection' && |
| | | exercisesType !== 'wrong' |
| | | " |
| | | > |
| | | <el-empty :image-size="60" description="暂无数据" /> |
| | | </div> |
| | | </div> |
| | |
| | | </ul> |
| | | <!-- 菜单内容收起 --> |
| | | <div class="menuStateBox" v-if="menuState.open"> |
| | | <svg @click="menuState.open = false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" |
| | | viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| | | stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left"> |
| | | <svg |
| | | @click="menuState.open = false" |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | width="20" |
| | | height="20" |
| | | viewBox="0 0 20 20" |
| | | fill="none" |
| | | stroke="currentColor" |
| | | stroke-width="2" |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left" |
| | | > |
| | | <path stroke="none" d="M0 0h24v24H0z" fill="none" /> |
| | | <path d="M10 12l10 0" /> |
| | | <path d="M10 12l4 4" /> |
| | |
| | | <div class="canvas-box" v-show="canvasShow"> |
| | | <canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas> |
| | | </div> |
| | | <!-- 番茄闹钟组件 --> |
| | | <div |
| | | class="watch-box" |
| | | v-if="pomodoroRef && pomodoroRef.isShow" |
| | | :style="{ top:position.x + 'px', left:position.y + 'px'}" |
| | | > |
| | | <p @mousedown.native="mouseDown">{{ formatTime(pomodoroRef.pageData.currentTime) }}</p> |
| | | <span @click="()=> pomodoroRef.isRuning ? pomodoroRef.pauseFun() : pomodoroRef.startFun()">{{pomodoroRef.isRuning ? '暂停': '开始'}}</span> |
| | | <span @click="pomodoroRef.resetFun" >重置</span> |
| | | <span @click="pomodoroRef.handleRestFun(false)">长休息</span> |
| | | <span @click="pomodoroRef.handleRestFun(true)">短休息</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 画笔组件 --> |
| | |
| | | <div class="popinnerBox"> |
| | | <div class="brush"> |
| | | <div class="thickness"> |
| | | <div :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" |
| | | @click="selectThickness('1')"></div> |
| | | <div :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" |
| | | @click="selectThickness('3')"></div> |
| | | <div :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" |
| | | @click="selectThickness('5')"></div> |
| | | <div |
| | | :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" |
| | | @click="selectThickness('1')" |
| | | ></div> |
| | | <div |
| | | :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" |
| | | @click="selectThickness('3')" |
| | | ></div> |
| | | <div |
| | | :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" |
| | | @click="selectThickness('5')" |
| | | ></div> |
| | | </div> |
| | | <div class="lineStyle"> |
| | | <div class="lineTypeBox"> |
| | | <div :class="toolSelectData.lineTypeActive == 'solid' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="selectLineType('solid')"> |
| | | <div |
| | | :class=" |
| | | toolSelectData.lineTypeActive == 'solid' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " |
| | | @click="selectLineType('solid')" |
| | | > |
| | | <div class="solid"></div> |
| | | <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'"> |
| | | <img :src="xuanzhong" /> |
| | | </div> |
| | | </div> |
| | | <div :class="toolSelectData.lineTypeActive == 'dashed' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="selectLineType('dashed')"> |
| | | <div |
| | | :class=" |
| | | toolSelectData.lineTypeActive == 'dashed' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " |
| | | @click="selectLineType('dashed')" |
| | | > |
| | | <div class="dashed"></div> |
| | | <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'"> |
| | | <img :src="xuanzhong" /> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="colorSelectBox"> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" |
| | | @click="lineColorSelect(item)"> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="lineColorSelect(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> |
| | | </div> |
| | |
| | | <div class="popinnerBox"> |
| | | <div class="lineStyle"> |
| | | <div class="lineTypeBox"> |
| | | <div :class="toolSelectData.fontSizeActive == '14' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="selectfontSize('14')"> |
| | | <div |
| | | :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' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="selectfontSize('16')"> |
| | | <div |
| | | :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' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " @click="selectfontSize('18')"> |
| | | <div |
| | | :class=" |
| | | toolSelectData.fontSizeActive == '18' |
| | | ? 'typeItem lineTypeActive' |
| | | : 'typeItem' |
| | | " |
| | | @click="selectfontSize('18')" |
| | | > |
| | | 大 |
| | | <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'"> |
| | | <img :src="xuanzhong" /> |
| | |
| | | </div> |
| | | <div class="lineStyle"> |
| | | <div class="colorSelectBox"> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" |
| | | @click="lineColorSelect(item)"> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="lineColorSelect(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> |
| | | </div> |
| | |
| | | <div class="graphBox"> |
| | | <div class="graphSelect"> |
| | | <div class="flex1"> |
| | | <div class="square hover" @click="graphSelect('square')"></div> |
| | | <div :class="toolSelectData.graphType == 'square' ? 'acitveGraphType' : ''"> |
| | | <div class="square hover" @click="graphSelect('square')"></div> |
| | | </div> |
| | | </div> |
| | | <div class="flex1"> |
| | | <div class="rotundity hover" @click="graphSelect('rotundity')"></div> |
| | | <div :class="toolSelectData.graphType == 'rotundity' ? 'acitveGraphType' : ''"> |
| | | <div class="rotundity hover" @click="graphSelect('rotundity')"></div> |
| | | </div> |
| | | </div> |
| | | <div class="flex1"> |
| | | <div class="triangle hover" @click="graphSelect('triangle')"></div> |
| | | <div :class="toolSelectData.graphType == 'triangle' ? 'acitveGraphType' : ''"> |
| | | <div class="triangle hover" @click="graphSelect('triangle')"></div> |
| | | </div> |
| | | </div> |
| | | <div class="flex1"> |
| | | <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div> |
| | | <div :class="toolSelectData.graphType == 'lineSegment' ? 'acitveGraphType' : ''"> |
| | | <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="lineStyle"> |
| | | <div class="colorSelectBox"> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" |
| | | @click="lineColorSelect(item)"> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="lineColorSelect(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> |
| | | </div> |
| | |
| | | <div class="menuList"> |
| | | <ul class="menu" v-if="teachToolsMenuData.length > 0"> |
| | | <li v-for="item in teachToolsMenuData" :key="item.key" class="hover"> |
| | | <div :style="!toolState.open ? 'padding:10px 15px' : ''" v-if="item.isShow" |
| | | @click="selectTeachTools(item)"> |
| | | <div |
| | | :style="!toolState.open ? 'padding:10px 15px' : ''" |
| | | v-if="item.isShow" |
| | | @click="selectTeachTools(item)" |
| | | > |
| | | <img :src="item.icon" alt="" /> |
| | | <span v-if="toolState.open">{{ item.name }}</span> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div :class="['openBox', toolState.open ? 'right' : '']" v-if="teachToolsMenuData.length > 0"> |
| | | <div |
| | | :class="['openBox', toolState.open ? 'right' : '']" |
| | | v-if="teachToolsMenuData.length > 0" |
| | | > |
| | | <!-- <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> --> |
| | | <!-- <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> --> |
| | | <svg v-if="!toolState.open" @click="toolState.open = true" xmlns="http://www.w3.org/2000/svg" width="24" |
| | | height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| | | stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left"> |
| | | <svg |
| | | v-if="!toolState.open" |
| | | @click="toolState.open = true" |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | width="24" |
| | | height="24" |
| | | viewBox="0 0 24 24" |
| | | fill="none" |
| | | stroke="currentColor" |
| | | stroke-width="2" |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left" |
| | | > |
| | | <path stroke="none" d="M0 0h24v24H0z" fill="none" /> |
| | | <path d="M10 12l10 0" /> |
| | | <path d="M10 12l4 4" /> |
| | | <path d="M10 12l4 -4" /> |
| | | <path d="M4 4l0 16" /> |
| | | </svg> |
| | | <svg v-if="toolState.open" @click="toolState.open = false" xmlns="http://www.w3.org/2000/svg" width="24" |
| | | height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| | | stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-right"> |
| | | <svg |
| | | v-if="toolState.open" |
| | | @click="toolState.open = false" |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | width="24" |
| | | height="24" |
| | | viewBox="0 0 24 24" |
| | | fill="none" |
| | | stroke="currentColor" |
| | | stroke-width="2" |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-right" |
| | | > |
| | | <path stroke="none" d="M0 0h24v24H0z" fill="none" /> |
| | | <path d="M14 12l-10 0" /> |
| | | <path d="M14 12l-4 4" /> |
| | |
| | | <el-tab-pane label="备课组件" name="first"> |
| | | <div class="tabBox"> |
| | | <div class="insertSelect"> |
| | | <div :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'" |
| | | @click="selectTypeClick('resource')"> |
| | | <div |
| | | :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'" |
| | | @click="selectTypeClick('resource')" |
| | | > |
| | | <img :src="selectType == 'resource' ? charuziyuan_blue : charuziyuan" /> |
| | | <div>插入资源</div> |
| | | </div> |
| | | <div :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'" |
| | | @click="selectTypeClick('answer')"> |
| | | <div |
| | | :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'" |
| | | @click="selectTypeClick('answer')" |
| | | > |
| | | <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" /> |
| | | <div>插入答题</div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 画笔工具栏 --> |
| | | <div draggable="true" class="draggableBox" :style="`left:${floatingToolData.elLeft}px`" |
| | | v-if="floatingToolBox.length > 0"> |
| | | <div |
| | | draggable="true" |
| | | class="draggableBox" |
| | | :style="`left:${floatingToolData.elLeft}px`" |
| | | v-if="floatingToolBox.length > 0" |
| | | > |
| | | <div v-for="item in floatingToolBox" :key="item.name" @click="floatItemHandle(item)"> |
| | | <div v-if="item.isShow"> |
| | | <el-popover placement="right" width="120" trigger="click" v-if="floatingToolData.activeToolData == '标记'"> |
| | | <el-popover |
| | | placement="right" |
| | | width="120" |
| | | trigger="click" |
| | | v-if="floatingToolData.activeToolData == '标记'" |
| | | > |
| | | <div class="popinnerBox"> |
| | | <div class="label" v-if="floatingToolData.activeToolData == '标记'"> |
| | | <div class="labelItem hover" @click="labelShow('hide')"> |
| | |
| | | </div> |
| | | </div> |
| | | <template #reference> |
| | | <div :class="floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | "> |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | > |
| | | <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> |
| | | <div class="imgBox"> |
| | | <img :src="item.icon" alt="" /> |
| | |
| | | </div> |
| | | </el-tooltip> |
| | | </div> |
| | | <div :class="floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " v-else-if=" |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | v-else-if=" |
| | | floatingToolData.activeToolData != '书签' && |
| | | floatingToolData.activeToolData != '标记' |
| | | "> |
| | | " |
| | | > |
| | | <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> |
| | | <div class="imgBox"> |
| | | <img :src="item.icon" alt="" /> |
| | |
| | | </div> |
| | | |
| | | <!-- 选中工具栏 --> |
| | | <div class="dialogToolBox" id="dialogToolBox" v-show="showToolBox" |
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"> |
| | | <div |
| | | class="dialogToolBox" |
| | | id="dialogToolBox" |
| | | v-show="showToolBox" |
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" |
| | | > |
| | | <div class="colorSelectBox" v-show="toolActive == '高亮' || toolActive == '划线'"> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="clickSelect(item)"> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="clickSelect(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong1" v-if="item.key == colorActive" /> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="toolSelectBox" v-show="toolActive != '高亮' && toolActive != '划线'"> |
| | | <div v-for="item in dialogToolList" :key="item.icon" @click="dialogToolHandle(item)"> |
| | | <div :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" v-if="item.isShow"> |
| | | <div |
| | | :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" |
| | | v-if="item.isShow" |
| | | > |
| | | <el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom"> |
| | | <img :src="item.icon" alt="" /> |
| | | </el-tooltip> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 划线,高亮删除 --> |
| | | <div class="lineDeleteBox" v-show="lineDelete.showLineDelete" |
| | | :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }"> |
| | | <div |
| | | class="lineDeleteBox" |
| | | v-show="lineDelete.showLineDelete" |
| | | :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" |
| | | > |
| | | <!-- <el-button @click="delUserKey">删除</el-button> --> |
| | | <div class="dialogToolItem"> |
| | | <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 笔记悬浮框 --> |
| | | <div class="noteContentBox" v-show="noteContent.show" :style="{ |
| | | top: `${noteContent.top}px`, |
| | | left: `${noteContent.left}px`, |
| | | background: noteContent.color |
| | | }"> |
| | | <div |
| | | class="noteContentBox" |
| | | v-show="noteContent.show" |
| | | :style="{ |
| | | top: `${noteContent.top}px`, |
| | | left: `${noteContent.left}px`, |
| | | background: noteContent.color |
| | | }" |
| | | > |
| | | <div>{{ noteContent.note }}</div> |
| | | </div> |
| | | <!-- 英文书选中单词词典内容 --> |
| | | <div class="dictionaryDataBox" v-if="dictionaryData.showContent" |
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"> |
| | | <div |
| | | class="dictionaryDataBox" |
| | | v-if="dictionaryData.showContent" |
| | | :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }" |
| | | > |
| | | <div class="content"> |
| | | <div class="word">{{ dictionaryData.data.word }}</div> |
| | | <div class="phone_con"> |
| | | <div class="per-phone"> |
| | | 英 <span>/{{ dictionaryData.data.ukPhone }}/</span><img :src="sound" class="soundBtn hover" |
| | | @click="soundWord(dictionaryData.data.word, 'en-UK')" /> |
| | | 英 <span>/{{ dictionaryData.data.ukPhone }}/</span |
| | | ><img |
| | | :src="sound" |
| | | class="soundBtn hover" |
| | | @click="soundWord(dictionaryData.data.word, 'en-UK')" |
| | | /> |
| | | </div> |
| | | <div class="per-phone"> |
| | | 美 <span>/{{ dictionaryData.data.usPhone }}/</span><img :src="sound" class="soundBtn hover" |
| | | @click="soundWord(dictionaryData.data.word, 'en-US')" /> |
| | | 美 <span>/{{ dictionaryData.data.usPhone }}/</span |
| | | ><img |
| | | :src="sound" |
| | | class="soundBtn hover" |
| | | @click="soundWord(dictionaryData.data.word, 'en-US')" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="trans"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog" |
| | | :before-close="resourVisbleClose"> |
| | | <!-- 白板 --> |
| | | <div v-if="whiteBoard" class="whiteBoardBox"> |
| | | <whiteBoardBox @whiteBoardClose="whiteBoardClose"></whiteBoardBox> |
| | | </div> |
| | | |
| | | <el-dialog |
| | | title="资源" |
| | | align-center |
| | | v-model="resourVisble" |
| | | width="845" |
| | | class="resourDialog" |
| | | :before-close="resourVisbleClose" |
| | | > |
| | | <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" /> |
| | | </div> --> |
| | | <div class="wordBox" v-if="resourType == 'PDF' || resourType == 'PPT' || resourType == 'WORD'"> |
| | | <div v-for="(item, index) in showData" :key="index" class="pdfItem" :page="index + 1"> |
| | | <img :src="item.showSrc" alt="" style="min-height: 550px" loading="lazy" /> |
| | | <el-divider content-position="center"> 第 {{ index + 1 }} 页 </el-divider> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | <div class="audioBox" v-show="false"> |
| | | <!-- <video controls controlslist="nodownload" :src="testVideo"></video> --> |
| | | <audio ref="audioPlayer" :src="testAudio" controls @loadedmetadata="autoPlay"></audio> |
| | | </div> |
| | | <!-- 图片 --> |
| | | <el-image-viewer v-if="confirmDialog" :zoom-rate="1.2" @close="closePreview" :initial-index="previewIndex" |
| | | :url-list="imgPreviewList" /> |
| | | <el-dialog title="添加笔记" align-center v-model="addNoteVisble" :before-close="handleClose" class="myNoteDialogs"> |
| | | <el-image-viewer |
| | | v-if="confirmDialog" |
| | | :zoom-rate="1.2" |
| | | @close="closePreview" |
| | | :initial-index="previewIndex" |
| | | :url-list="imgPreviewList" |
| | | /> |
| | | <el-dialog |
| | | title="添加笔记" |
| | | align-center |
| | | v-model="addNoteVisble" |
| | | :before-close="handleClose" |
| | | class="myNoteDialogs" |
| | | > |
| | | <div class="formBox"> |
| | | <el-input type="textarea" :rows="4" v-model="formData.desc" placeholder="请输入笔记内容"></el-input> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="4" |
| | | v-model="formData.desc" |
| | | placeholder="请输入笔记内容" |
| | | ></el-input> |
| | | </div> |
| | | <div class="noteColorSelectBox"> |
| | | <div v-for="item in colorSelectList" :key="item.key" class="flex1 hover" @click="clickSelectColor(item)"> |
| | | <div |
| | | v-for="item in colorSelectList" |
| | | :key="item.key" |
| | | class="flex1 hover" |
| | | @click="clickSelectColor(item)" |
| | | > |
| | | <div :style="{ background: item.key }" class="scribeItem"> |
| | | <img :src="xuanzhong" v-if="item.key == noteColorActive" /> |
| | | </div> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog title="保存截图" align-center v-model="screenshotVisble" :before-close="screenshotClose" width="400" |
| | | class="resourDialog screenshotDialog"> |
| | | <el-dialog |
| | | title="保存截图" |
| | | align-center |
| | | v-model="screenshotVisble" |
| | | :before-close="screenshotClose" |
| | | width="400" |
| | | class="resourDialog screenshotDialog" |
| | | > |
| | | <div class="formBox"> |
| | | <el-input v-model="nameData" placeholder="请输入截图名称"></el-input> |
| | | </div> |
| | | <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> |
| | |
| | | <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="60%" class="myAnserDialogs"> |
| | | <el-dialog |
| | | title="AI智能问答" |
| | | align-center |
| | | v-model="wendaVisible" |
| | | width="60%" |
| | | class="myAnserDialogs" |
| | | > |
| | | <div class="wendabox"> |
| | | <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe> |
| | | </div> |
| | |
| | | <dictionary /> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog title="GGB函数工具" align-center v-model="functionVisible" width="80%" class="myDialogs"> |
| | | <el-dialog |
| | | title="GGB函数工具" |
| | | align-center |
| | | v-model="functionVisible" |
| | | width="80%" |
| | | class="myDialogs" |
| | | > |
| | | <div class="wendabox"> |
| | | <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe> |
| | | </div> |
| | |
| | | </el-dialog> |
| | | <el-dialog title="模型工具" align-center v-model="modelToolVisble" width="80%" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <iframe :src="sceneUrl" frameborder="0"></iframe> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog title="模型工具" align-center v-model="modelTool" width="80%" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | <newWord :resourceUrl="resourceUrl" /> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog title="错题本" align-center v-model="wrongQuestionVisble" width="800" class="myDialogs"> |
| | | <el-dialog |
| | | title="错题本" |
| | | align-center |
| | | v-model="wrongQuestionVisble" |
| | | width="800" |
| | | class="myDialogs" |
| | | > |
| | | <div class="wendabox"> |
| | | <wrongQuestion /> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 答题器 --> |
| | | <examination ref="examinationRef" :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" |
| | | :infoType="examinationData.infoType" /> |
| | | <!-- 计算器 --> |
| | | <el-dialog title="计算器" align-center v-model="calculatorVisble" width="850" class="myDialogs"> |
| | | <calculatorNew></calculatorNew> |
| | | <el-dialog title="公式编辑" align-center v-model="formulaDialog" class="myDialogs"> |
| | | <div class="wendabox"> |
| | | <formula /> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 答题器 --> |
| | | <examination |
| | | ref="examinationRef" |
| | | :activeBook="bookConfig" |
| | | :info="examinationData.info" |
| | | :type="examinationData.type" |
| | | :infoType="examinationData.infoType" |
| | | /> |
| | | <!-- 计算器 --> |
| | | <el-dialog title="计算器" align-center v-model="calculatorVisble" width="850" class="myDialogs"> |
| | | <!-- <calculatorNew></calculatorNew> --> |
| | | <iframe src="https://www.geogebra.org/scientific" frameborder="0" class="iframe-box"></iframe> |
| | | </el-dialog> |
| | | <!-- 番茄闹钟 --> |
| | | <!-- <pomodoro ref="pomodoroRef" /> --> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | import heart from '@/assets/images/examination/collectIcon.png' |
| | | import isHeart from '@/assets/images/examination/collectClickIcon.png' |
| | | import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject, defineComponent } from 'vue' |
| | | import examination from '@/views/examination/index.vue' |
| | | import pomodoro from '@/views/components/pomodoro.vue' |
| | | import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue' |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' |
| | | import { useFormatData } from '@/hooks/public' |
| | | import useClipboard from 'vue-clipboard3' |
| | | import examination from '../examination/index.vue' |
| | | import calculator from '../components/calculator.vue' |
| | | import calculatorNew from '../components/calculatorNew.vue' |
| | | const { toClipboard } = useClipboard() |
| | | const { formatTime } = useFormatData() |
| | | const MG: any = inject('MG') |
| | | const toolClass = inject('toolClass') |
| | | const qiankunActions = inject('qiankunActions') |
| | | //获取路由器 |
| | | let router = useRouter() |
| | | //获取当前路由的信息 |
| | |
| | | import moment from 'moment' |
| | | import dictionary from '@/views/components/dictionary.vue' |
| | | import newWord from '@/views/components/newWord.vue' |
| | | import formula from '@/views/components/formula.vue' |
| | | import wrongQuestion from '@/views/components/wrongQuestion.vue' |
| | | import voiceReader from '@/views/components/voiceReader.vue' |
| | | import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' |
| | | import whiteBoardBox from '@/views/components/whiteBoard.vue' |
| | | import logo from '@/assets/images/header/logo.png' |
| | | import mulu from '@/assets/images/menu/mulu.png' |
| | | import biji from '@/assets/images/menu/biji.png' |
| | |
| | | import { microApps } from '@/child.ts' |
| | | import { open } from 'fs' |
| | | let token = localStorage.getItem('token') |
| | | const canvasWith = ref(1000) |
| | | const canvasWith = ref(800) |
| | | const canvasheight = ref(3000) |
| | | const screenWidth = ref( |
| | | window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
| | |
| | | const bookConfig = ref({}) |
| | | const activeCatalog = ref() |
| | | const reMarResult = ref() |
| | | const bookInfo = ref() |
| | | const isBuy = ref(false) |
| | | const tryPageCount = ref(0) |
| | | const searchText = ref() |
| | | onMounted(() => { |
| | | if (token) { |
| | | getUserInfo() |
| | | } |
| | | if (localStorage.getItem('bookId')) { |
| | | getBookInfo() |
| | | } |
| | | setTimeout(() => { |
| | | canvasWith.value = document.querySelector('.content-box').offsetWidth |
| | |
| | | window.qiankunActions.onGlobalStateChange((state, prev) => { |
| | | console.log('父层state变化', state) |
| | | window.qiankunState = state |
| | | |
| | | if (window.qiankunState && window.qiankunState.initTestBook) { |
| | | window.qiankunState.initTestBook( |
| | | localStorage.getItem('bookId') + '', |
| | | localStorage.getItem('tryPageCount') |
| | | ) |
| | | if (isBuy.value) { |
| | | if (window.qiankunState && window.qiankunState.initTestBook) { |
| | | window.qiankunState.initTestBook(localStorage.getItem('bookId') + '') |
| | | } |
| | | } else { |
| | | if (window.qiankunState && window.qiankunState.initTestBook) { |
| | | window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value) |
| | | } |
| | | } |
| | | }) |
| | | |
| | |
| | | // } |
| | | // ) |
| | | |
| | | //根据refcode获取图书信息 |
| | | |
| | | const getBookInfo = () => { |
| | | const obj = { |
| | | storeInfo: 'jsek_digitalTextbooks', |
| | | path: '*', |
| | | queryType: '*', |
| | | coverSize: { |
| | | width: 150 |
| | | }, |
| | | paging: { |
| | | start: 0, |
| | | size: 6 |
| | | }, |
| | | filterList: [ |
| | | { |
| | | value: 'Normal', |
| | | field: 'state' |
| | | } |
| | | ], |
| | | fields: { |
| | | author: [], |
| | | RefCodes: [localStorage.getItem('bookId')], |
| | | probationPage: [] |
| | | } |
| | | } |
| | | MG.store.getProductList(obj).then((res) => { |
| | | console.log(res.datas, '图书信息') |
| | | if (!res.datas.length) return |
| | | bookInfo.value = res.datas[0] |
| | | if (res.datas[0].purchasedSaleMethodIdList.indexOf(res.datas[0].defaultSaleMethodId) > -1) { |
| | | isBuy.value = true |
| | | } else { |
| | | isBuy.value = false |
| | | } |
| | | tryPageCount.value = Number(res.datas[0].probationPage) |
| | | }) |
| | | } |
| | | |
| | | const getUserInfo = () => { |
| | | MG.identity.getCurrentAppUser().then((res) => { |
| | | console.log(res, '用户信息') |
| | |
| | | name: '知识图谱', |
| | | icon: zhishitupu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('6BE6A3DC') > -1 |
| | | }, |
| | | { |
| | | name: '截图', |
| | | icon: jietu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1 |
| | | // isShow: true |
| | | }, |
| | | { |
| | | name: '书签', |
| | |
| | | bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || |
| | | bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || |
| | | bookConfig.value.textbookComponents.indexOf('A4821F71') > -1 |
| | | }, |
| | | { |
| | | name: '截图', |
| | | icon: jietu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1 |
| | | } |
| | | ] |
| | | teachToolsMenuData = [ |
| | |
| | | icon: fanqiezhong, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('E4DC9777') > -1 |
| | | } |
| | | // { |
| | | // name: '番茄闹钟', |
| | | // icon: fanqiezhong, |
| | | // isShow: true |
| | | // } |
| | | ] |
| | | floatingToolBox = [ |
| | | { |
| | | icon: huabi, |
| | | name: '画笔', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 |
| | | // isShow: true |
| | | }, |
| | | { |
| | | icon: baiban, |
| | | name: '白板', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1 |
| | | // isShow: true |
| | | }, |
| | | { |
| | | icon: biaozhu, |
| | |
| | | catalogueData.value = json.data |
| | | headerData.totlePage = json.data[json.data.length - 1].end |
| | | listLoading.value = false |
| | | if (localStorage.getItem('chapter') && localStorage.getItem('startPage')) { |
| | | let chapter = Number(localStorage.getItem('chapter')) |
| | | let start = Number(localStorage.getItem('startPage')) |
| | | |
| | | if (window.qiankunState && window.qiankunState.gotoPage) { |
| | | window.qiankunState.gotoPage(chapter, start) |
| | | localStorage.removeItem('chapter') |
| | | localStorage.removeItem('startPage') |
| | | } |
| | | } |
| | | }) |
| | | .catch(function (error) { |
| | | listLoading.value = false |
| | | console.log(error) |
| | | }) |
| | | } |
| | | const defaultProps = { |
| | |
| | | } |
| | | |
| | | const handleNodeClick = (data) => { |
| | | console.log(data) |
| | | if (localStorage.getItem('tryPageCount')) { |
| | | if (data.start < localStorage.getItem('tryPageCount')) { |
| | | if (!isBuy.value) { |
| | | if (data.start < tryPageCount.value) { |
| | | headerData.process = data.start |
| | | if (window.qiankunState && window.qiankunState.gotoPage) |
| | | window.qiankunState.gotoPage(data.chapter, data.start) |
| | |
| | | item.icon = '' |
| | | } |
| | | if (resourceType.value == 'default') { |
| | | if (item.isTeacherResource == '否') { |
| | | if (item.isDefaultResource == '是') { |
| | | defaultResourceList.value.push(item) |
| | | } |
| | | } else { |
| | | if (item.isTeacherResource == '是') { |
| | | if (item.isTeacherResource == '是' && item.isDefaultResource == '否') { |
| | | teacherResourceList.value.push(item) |
| | | } |
| | | } |
| | |
| | | if (resItem1.resourceType == classifySelectList.value[0].title) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | if (activeClassify.value == 'other') { |
| | | if ( |
| | | resItem1.resourceType != '图片' && |
| | | resItem1.resourceType != '视频' && |
| | | resItem1.resourceType != '音频' |
| | | ) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } else { |
| | |
| | | if (resItem1.resourceType == classifySelectList.value[0].title) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | if (activeClassify.value == 'other') { |
| | | if ( |
| | | resItem1.resourceType != '图片' && |
| | | resItem1.resourceType != '视频' && |
| | | resItem1.resourceType != '音频' |
| | | ) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | //资源播放视频 |
| | | const sceneUrl = ref() |
| | | const showData = ref() |
| | | const goPlay = (data, index) => { |
| | | console.log(data.resourceType, 123) |
| | | resourType.value = data.resourceType |
| | | if (data.resourceType == '视频') { |
| | | if (data.md5) { |
| | |
| | | testAudio.value = bookConfig.value.resourceUrl + '/' + data.resourcePath |
| | | } |
| | | autoPlay() |
| | | } else if (data.resourceType == '模型') { |
| | | console.log(data, 222) |
| | | let file = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 |
| | | console.log(file.exd, 777) |
| | | const ctx = 'https://jsek.bnuic.com' |
| | | if (data.md5) { |
| | | sceneUrl.value = |
| | | 'https://jsek.bnuic.com/books/book/civilAviation/static/modelView/index.html?md5=' + |
| | | data.md5 + |
| | | '&name=je' + |
| | | '&domain=' + |
| | | ctx + |
| | | '&exd=obj' + |
| | | '&target=iframe' |
| | | } else { |
| | | sceneUrl.value = bookConfig.value.resourceUrl + '/' + data.resourcePath |
| | | } |
| | | modelToolVisble.value = true |
| | | // if (data.md5) { |
| | | // window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) |
| | | // } else if (data.resourcePath) { |
| | | // window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath) |
| | | // } |
| | | } else if (data.resourceType == 'PPT' || data.resourceType == 'PDF' || data.resourceType == 'WORD') { |
| | | let md5 = data.md5 |
| | | let dataList = [] |
| | | MG.file |
| | | .getPdfInfo({ |
| | | md5 |
| | | }) |
| | | .then((res: any) => { |
| | | console.log() |
| | | if (res && res.totalPages) { |
| | | for (let i = 0; i < res.totalPages; i++) { |
| | | const src = |
| | | bookConfig.value.requestCtx + |
| | | '/file/GetPdfPageImage?md5=' + |
| | | md5 + |
| | | '&index=' + |
| | | (i + 1) + |
| | | '&dpi=300' |
| | | dataList.push({ |
| | | showSrc: src |
| | | }) |
| | | } |
| | | console.log(dataList) |
| | | showData.value = dataList |
| | | // 启动页码观察 |
| | | setTimeout(() => { |
| | | resourVisble.value = true |
| | | }, 500) |
| | | } |
| | | }) |
| | | } else { |
| | | if (data.md5) { |
| | | window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) |
| | |
| | | // else if (data.resourceType == 'word') { |
| | | // testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath |
| | | // } |
| | | } |
| | | const goDownload = (data) => { |
| | | if (data.md5) { |
| | | window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) |
| | | } else if (data.resourcePath) { |
| | | window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath) |
| | | } |
| | | } |
| | | // 关闭视频 |
| | | const resourVisbleClose = () => { |
| | |
| | | //资源类型选择默认/教师 |
| | | const selectResourceType = (type) => { |
| | | resourceType.value = type |
| | | resourceDataList.value = [] |
| | | classifySelectList.value = [] |
| | | activeClassify.value = '' |
| | | searchText.value = '' |
| | | if (type == 'collect') { |
| | | getCollectResource() |
| | |
| | | } else { |
| | | getResourceData() |
| | | } |
| | | |
| | | } |
| | | const searchBtn = () => { |
| | | if (searchShow.value) { |
| | |
| | | if (resItem1.resourceType == classifySelectList.value[0].title) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | if (activeClassify.value == 'other') { |
| | | if ( |
| | | resItem1.resourceType != '图片' && |
| | | resItem1.resourceType != '视频' && |
| | | resItem1.resourceType != '音频' |
| | | ) { |
| | | resourceDataList.value.push(resItem1) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | // 收藏按钮 |
| | | const handleCollectResource = (id, md5, resourcePath, resourceType, source, resourceName) => { |
| | | if (collectResourceList.value.findIndex(item => item.id == id) > -1) { |
| | | collectResourceList.value = collectResourceList.value.filter(item => item.id != id) |
| | | if (collectResourceList.value.findIndex((item) => item.id == id) > -1) { |
| | | collectResourceList.value = collectResourceList.value.filter((item) => item.id != id) |
| | | } else { |
| | | collectResourceList.value.push({ |
| | | id, |
| | |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: "collectResource", |
| | | domain: 'collectResource', |
| | | key: bookConfig.value.bookId, |
| | | value: JSON.stringify(collectResourceList.value), |
| | | }, |
| | | ], |
| | | value: JSON.stringify(collectResourceList.value) |
| | | } |
| | | ] |
| | | }) |
| | | } |
| | | |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | |
| | | .then(() => { |
| | | router.push('/login') |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | | //错题本 |
| | | const wrongQuestionVisble = ref(false) |
| | | const selectExercisesType = (type) => { |
| | | |
| | | if (type == 'exercises') { |
| | | getExercisesList() |
| | | exercisesType.value = type |
| | |
| | | const menuItemClick = (name) => { |
| | | searchText.value = '' |
| | | allSearchReault.value = [] |
| | | listLoading.value = false |
| | | if (menuState.open && activeMenu.value == name) { |
| | | menuState.open = false |
| | | } else { |
| | |
| | | // } |
| | | } |
| | | |
| | | const searchText = ref<string>('') //筛选 |
| | | const menuState = reactive({ |
| | | open: true, |
| | | notesColor: 'all' //笔记颜色 |
| | |
| | | getExercisesList() |
| | | break |
| | | case '检索': |
| | | listLoading.value = true |
| | | allSearchReault.value = [] |
| | | console.log(window.qiankunState.searchBookByKeyword) |
| | | if (window.qiankunState && window.qiankunState.searchBookByKeyword) { |
| | | console.log(window.qiankunState.searchBookByKeyword) |
| | | let searchReault = window.qiankunState.searchBookByKeyword(searchText.value) |
| | | if (searchReault.length > 0) { |
| | | listLoading.value = true |
| | | let catalogueList = sortArr(catalogueData.value, 'chapter') |
| | | if (catalogueList.length > 0) { |
| | | catalogueList.forEach((item) => { |
| | |
| | | } |
| | | }) |
| | | } |
| | | console.log(allSearchReault.value, 444) |
| | | listLoading.value = false |
| | | }else{ |
| | | listLoading.value = false |
| | | } |
| | | } |
| | |
| | | break |
| | | } |
| | | } |
| | | |
| | | type pomodoroType = InstanceType<typeof Pomodoro> |
| | | const baiduVisible = ref(false) |
| | | const wendaVisible = ref(false) |
| | | const cidianVisible = ref(false) |
| | | const functionVisible = ref(false) |
| | | const siweiVisble = ref(false) |
| | | const modelToolVisble = ref(false) |
| | | const modelTool = ref(false) |
| | | const shengciVisble = ref(false) |
| | | const calculatorVisble = ref(false) |
| | | const pomodoroRef = ref<pomodoroType>() |
| | | const activeTool = ref(0) |
| | | const toolState = reactive({ |
| | | open: true |
| | | }) |
| | | const resourceUrl = ref('') |
| | | |
| | | const selectTeachTools = (item) => { |
| | | const selectTeachTools = (item: any) => { |
| | | if (token) { |
| | | activeTool.value = item.name |
| | | switch (item.name) { |
| | |
| | | siweiVisble.value = true |
| | | break |
| | | case '模型工具': |
| | | modelToolVisble.value = true |
| | | modelTool.value = true |
| | | break |
| | | case '词典': |
| | | cidianVisible.value = true |
| | |
| | | break |
| | | case '计算器': |
| | | calculatorVisble.value = true |
| | | case '番茄闹钟': |
| | | pomodoroRef.value.setDialogVisable(true) |
| | | break |
| | | } |
| | | } else { |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | //画布悬浮操作 |
| | | |
| | | let canvas = null |
| | | let canvasBox: any = null |
| | | const floatingToolData = reactive({ |
| | | activeToolData: '', //选中工具 |
| | | activeBookmark: '', //选中书签 |
| | |
| | | |
| | | //画布 |
| | | const canvasShow = ref(false) |
| | | let textBox: any = null |
| | | let activeElBox: any = null |
| | | //白板 |
| | | const whiteBoard = ref(false) |
| | | |
| | | //截图事件 |
| | | const nameRef = ref() |
| | |
| | | |
| | | //浮窗工具栏点击事件 |
| | | const floatItemHandle = (item) => { |
| | | console.log(floatingToolData.activeToolData, 'floatingToolData.activeToolData') |
| | | if (floatingToolData.activeToolData == '画笔') { |
| | | floatingToolData.activeToolData = '' |
| | | } else { |
| | |
| | | } |
| | | |
| | | canvasShow.value = false |
| | | whiteBoard.value = false |
| | | switch (floatingToolData.activeToolData) { |
| | | case '画笔': |
| | | canvasShow.value = true |
| | | toolSelectData.activeTool = 'huabi' |
| | | canvasBox = new fabric.Canvas('canvasRef') |
| | | canvasBox.setZoom(1); // 设置画布缩放比例为1 |
| | | canvasBox.absolutePan({ x: 0, y: 0 }); |
| | | break |
| | | case '白板': |
| | | whiteBoard.value = true |
| | | break |
| | | case '标记': |
| | | break |
| | |
| | | const toolSelectHandle = (title) => { |
| | | toolSelectData.activeTool = title |
| | | toolSelectData.lineColorActive = '' |
| | | canvasBox.isDrawingMode = false |
| | | switch (title) { |
| | | case 'huabi': |
| | | init() |
| | | canvasBox.skipTargetFind = false |
| | | canvasBox.isDrawingMode = true |
| | | toolSelectData.graphType = '' |
| | | canvasBox.freeDrawingBrush.color = '#333' |
| | | canvasBox.freeDrawingBrush.width = '3' |
| | | canvasBox.on('mouse:down', '') // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:up', '') |
| | | canvasBox.on('mouse:move', '') |
| | | break |
| | | case 'wenzi': |
| | | canvasBox.skipTargetFind = false |
| | | canvasBox.isDrawingMode = false |
| | | toolSelectData.graphType = '' |
| | | textBox = new fabric.IText('请输入文本', { |
| | | left: 50, |
| | | top: 50, |
| | | fontSize: toolSelectData.fontSizeActive |
| | | }) |
| | | canvasBox.add(textBox) |
| | | canvasBox.on('mouse:down', '') // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:up', '') |
| | | canvasBox.on('mouse:move', '') |
| | | break |
| | | case 'tuxing': |
| | | canvasBox.isDrawingMode = false |
| | | canvasBox.selectionColor = 'transparent' |
| | | canvasBox.skipTargetFind = true |
| | | toolSelectData.lineColorActive = '#000' |
| | | break |
| | | case 'chexiao': |
| | | canvasBox.skipTargetFind = false |
| | | canvasBox.isDrawingMode = false |
| | | canvasBox.remove(activeElBox) |
| | | canvasBox.requestRenderAll() |
| | | activeElBox = null |
| | | break |
| | | case 'tuichu': |
| | | canvasBox.skipTargetFind = false |
| | | canvasBox.isDrawingMode = false |
| | | canvasShow.value = false |
| | | floatingToolData.activeToolData = '' |
| | | break |
| | | case 'qingchu': |
| | | canvas.clear() |
| | | canvasBox.clear() |
| | | break |
| | | } |
| | | } |
| | |
| | | //选中画笔粗细 |
| | | const selectThickness = (str) => { |
| | | toolSelectData.thicknessActive = str |
| | | canvas.freeDrawingBrush.color = toolSelectData.thicknessActive |
| | | canvasBox.freeDrawingBrush.width = toolSelectData.thicknessActive |
| | | } |
| | | |
| | | const selectLineType = (str) => { |
| | | toolSelectData.lineTypeActive = str |
| | | init() |
| | | if (toolSelectData.lineTypeActive == 'dashed') { |
| | | canvasBox.freeDrawingBrush.strokeDashArray = [10] |
| | | } else { |
| | | canvasBox.freeDrawingBrush.strokeDashArray = null |
| | | } |
| | | } |
| | | //画笔颜色选择 |
| | | const lineColorSelect = (item) => { |
| | | toolSelectData.lineColorActive = item.key |
| | | canvas.freeDrawingBrush.color = item.key |
| | | } |
| | | //画布属性 |
| | | const isDrawing = ref(true) // 是否开启绘图,true 开启;false 关闭 |
| | | const init = () => { |
| | | canvas = new fabric.Canvas('canvasRef', { |
| | | isDrawingMode: isDrawing.value // 启用绘画模式 |
| | | }) |
| | | canvas.freeDrawingBrush.color = toolSelectData.lineColorActive |
| | | canvas.freeDrawingBrush.width = toolSelectData.thicknessActive |
| | | if ((toolSelectData.activeTool == 'huabi')) { |
| | | canvasBox.freeDrawingBrush.color = item.key |
| | | } |
| | | if ((toolSelectData.activeTool == 'wenzi')) { |
| | | textBox.fill = toolSelectData.lineColorActive |
| | | } |
| | | } |
| | | |
| | | //文字大小 |
| | | const selectfontSize = (str) => { |
| | | toolSelectData.fontSizeActive = str |
| | | textBox.fontSize = toolSelectData.fontSizeActive |
| | | } |
| | | |
| | | //选择图形 |
| | |
| | | toolSelectData.graphType = type |
| | | switch (type) { |
| | | case 'square': |
| | | canvasBox.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:up', canvasMouseUp) |
| | | canvasBox.selectionBorderColor = toolSelectData.lineColorActive |
| | | break |
| | | case 'rotundity': |
| | | canvasBox.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:up', canvasMouseUp) |
| | | canvasBox.on('mouse:move', canvasMouseMove) |
| | | break |
| | | case 'triangle': |
| | | canvasBox.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:up', canvasMouseUp) |
| | | canvasBox.on('mouse:move', canvasMouseMove) |
| | | break |
| | | case 'lineSegment': |
| | | canvasBox.on('mouse:down', canvasMouseDown) // 鼠标在画布上按下 |
| | | canvasBox.on('mouse:move', canvasMouseMove) // 鼠标在画布上移动 |
| | | canvasBox.on('mouse:up', canvasMouseUp) |
| | | break |
| | | } |
| | | } |
| | | |
| | | let downPoint = null // 鼠标按下的坐标 |
| | | let upPoint = null |
| | | let currentCircle = null // 临时圆,创建圆的时候使用 |
| | | let currentTriangle = null // 临时三角形 |
| | | let currentLine = null // 临时线段 |
| | | function canvasOnMouseDownDel(opt) { |
| | | // 右键,且在元素上右键 |
| | | // button: 1-左键;2-中键;3-右键 |
| | | // 在画布上右键,target 为 null |
| | | if (opt.button === 1 && opt.target) { |
| | | // 获取当前元素 |
| | | activeElBox = opt.target |
| | | } |
| | | } |
| | | // 鼠标在画布上按下 |
| | | function canvasMouseDown(e) { |
| | | downPoint = e.absolutePointer |
| | | if (toolSelectData.graphType === 'rotundity') { |
| | | currentCircle = new fabric.Circle({ |
| | | top: downPoint.y, |
| | | left: downPoint.x, |
| | | radius: 0, |
| | | fill: 'transparent', |
| | | stroke: toolSelectData.lineColorActive |
| | | }) |
| | | |
| | | canvasBox.add(currentCircle) |
| | | } |
| | | if (toolSelectData.graphType === 'triangle') { |
| | | currentTriangle = new fabric.Triangle({ |
| | | top: downPoint.y, |
| | | left: downPoint.x, |
| | | width: 0, |
| | | height: 0, |
| | | fill: 'transparent', |
| | | stroke: toolSelectData.lineColorActive |
| | | }) |
| | | canvasBox.add(currentTriangle) |
| | | } |
| | | if (toolSelectData.graphType === 'lineSegment') { |
| | | currentLine = new fabric.Line( |
| | | [ |
| | | downPoint.x, |
| | | downPoint.y, // 起始点坐标 |
| | | downPoint.x, |
| | | downPoint.y // 结束点坐标 |
| | | ], |
| | | { |
| | | stroke: toolSelectData.lineColorActive // 笔触颜色 |
| | | } |
| | | ) |
| | | canvasBox.add(currentLine) |
| | | } |
| | | } |
| | | // 鼠标在画布上松开 |
| | | function canvasMouseUp(e) { |
| | | if (toolSelectData.graphType === 'square') { |
| | | // 创建矩形 |
| | | createRect(e.absolutePointer) |
| | | } |
| | | |
| | | if (toolSelectData.graphType === 'rotundity') { |
| | | if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) { |
| | | canvasBox.remove(currentCircle) |
| | | } else { |
| | | if (currentCircle) { |
| | | currentCircle.set('stroke', toolSelectData.lineColorActive) |
| | | } |
| | | } |
| | | currentCircle = null |
| | | } |
| | | |
| | | if (toolSelectData.graphType === 'triangle') { |
| | | if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) { |
| | | canvasBox.remove(currentTriangle) |
| | | } else { |
| | | currentTriangle.set('stroke', toolSelectData.lineColorActive) |
| | | } |
| | | currentTriangle = null |
| | | } |
| | | |
| | | if (toolSelectData.graphType === 'lineSegment') { |
| | | if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) { |
| | | canvasBox.remove(currentLine) |
| | | } else { |
| | | currentLine.set('stroke', toolSelectData.lineColorActive) |
| | | } |
| | | currentLine = null |
| | | } |
| | | } |
| | | // 创建矩形 |
| | | function createRect(pointer) { |
| | | // 点击事件,不生成矩形 |
| | | if (JSON.stringify(downPoint) === JSON.stringify(pointer)) { |
| | | return |
| | | } |
| | | |
| | | // 创建矩形 |
| | | // 矩形参数计算 |
| | | let top = Math.min(downPoint.y, pointer.y) |
| | | let left = Math.min(downPoint.x, pointer.x) |
| | | let width = Math.abs(downPoint.x - pointer.x) |
| | | let height = Math.abs(downPoint.y - pointer.y) |
| | | |
| | | // 矩形对象 |
| | | const rect = new fabric.Rect({ |
| | | top, |
| | | left, |
| | | width, |
| | | height, |
| | | fill: 'transparent', |
| | | stroke: toolSelectData.lineColorActive |
| | | }) |
| | | // 将矩形添加到画布上 |
| | | canvasBox.add(rect) |
| | | downPoint = null |
| | | } |
| | | // 鼠标在画布上移动 |
| | | function canvasMouseMove(e) { |
| | | if (toolSelectData.graphType === 'rotundity' && currentCircle) { |
| | | const currentPoint = e.absolutePointer |
| | | |
| | | let radius = |
| | | Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2 |
| | | let top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2 |
| | | let left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - radius * 2 |
| | | |
| | | currentCircle.set('radius', radius) |
| | | currentCircle.set('top', top) |
| | | currentCircle.set('left', left) |
| | | |
| | | canvasBox.requestRenderAll() |
| | | } |
| | | if (toolSelectData.graphType === 'triangle' && currentTriangle) { |
| | | const currentPoint = e.absolutePointer |
| | | |
| | | let width = Math.abs(downPoint.x - currentPoint.x) |
| | | let height = Math.abs(downPoint.y - currentPoint.y) |
| | | |
| | | let top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y |
| | | let left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x |
| | | |
| | | currentTriangle.set('width', width) |
| | | currentTriangle.set('height', height) |
| | | currentTriangle.set('top', top) |
| | | currentTriangle.set('left', left) |
| | | canvasBox.requestRenderAll() |
| | | } |
| | | if (toolSelectData.graphType === 'lineSegment' && currentLine) { |
| | | const currentPoint = e.absolutePointer |
| | | |
| | | currentLine.set('x2', currentPoint.x) |
| | | currentLine.set('y2', currentPoint.y) |
| | | |
| | | canvasBox.requestRenderAll() |
| | | } |
| | | } |
| | | |
| | | //白板关闭 |
| | | const whiteBoardClose = () => { |
| | | whiteBoard.value = false |
| | | floatingToolData.activeToolData = '' |
| | | } |
| | | //标记显示隐藏 |
| | | const labelShow = (str) => { |
| | |
| | | }) |
| | | getReMarkList() |
| | | }) |
| | | .catch(function (error) { }) |
| | | .catch(function (error) {}) |
| | | } |
| | | } else { |
| | | ElMessageBox.confirm('请先登录!', { |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | const getReMarkList = () => { |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | | //跳转 |
| | | const goReMark = (item) => { |
| | | console.log(item) |
| | | if (window.qiankunState && window.qiankunState.gotoPage) { |
| | | window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) |
| | | } |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | //确认回调 |
| | |
| | | } |
| | | //取消回调 |
| | | const closeFn = (base64: any) => { |
| | | console.log(base64) |
| | | floatingToolData.activeToolData = '' |
| | | } |
| | | //保存截图 |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | //查看截图 |
| | |
| | | getScreenshotList() |
| | | }) |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | |
| | | //选中文字工具栏 |
| | |
| | | window.speechSynthesis.cancel() |
| | | const synth = window.speechSynthesis |
| | | const utterance = new SpeechSynthesisUtterance(dialogToolData.txt) |
| | | console.log(utterance, 1) |
| | | utterance.lang = 'zh-CN' // 设置语言为中文 |
| | | synth.speak(utterance) |
| | | showToolBox.value = false |
| | |
| | | |
| | | showToolBox.value = false |
| | | // cidianVisible.value = true |
| | | console.log(dialogToolData.txt) |
| | | break |
| | | case '百科': |
| | | console.log('https://baike.baidu.com/item/' + dialogToolData.txt) |
| | | baiduVisible.value = true |
| | | break |
| | | } |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | |
| | | const item = res[i] |
| | | // 储值 |
| | | let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key)) |
| | | // console.log(data,'666') |
| | | let dataList = [] |
| | | if (catalogueData.value.length > 0) { |
| | | catalogueData.value.forEach((item1) => { |
| | |
| | | }) |
| | | } |
| | | } |
| | | console.log(scribeData.noteList, 'scribeData.noteList') |
| | | } |
| | | listLoading.value = false |
| | | }) |
| | |
| | | }) |
| | | } |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | } |
| | | |
| | |
| | | document.addEventListener('mousemove', function (event) { |
| | | var x = event.offsetX |
| | | var y = event.offsetY |
| | | // console.log('鼠标坐标位置:', x, y) |
| | | noteContent.top = event.clientY + 20 |
| | | noteContent.left = event.clientX |
| | | }) |
| | | } |
| | | window.noteOut = (type) => { |
| | | console.log(type, 123) |
| | | noteContent.show = false |
| | | } |
| | | |
| | |
| | | |
| | | //笔记跳转 |
| | | const jumpContent = (item) => { |
| | | console.log(item) |
| | | 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 |
| | |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => { }) |
| | | .catch(() => {}) |
| | | } |
| | | |
| | | //获取选中英文词典 |
| | |
| | | } |
| | | ]) |
| | | .then((res) => { |
| | | console.log(res[0][0], 'cid') |
| | | if (res.length > 0 && res[0].length > 0) { |
| | | res[0].map((item) => { |
| | | item.trans = JSON.parse(item.trans) |
| | | }) |
| | | dictionaryData.data = res[0][0] |
| | | console.log(dictionaryData.data, '14') |
| | | dictionaryData.showContent = true |
| | | } |
| | | }) |
| | |
| | | router.replace({ |
| | | path: '/login' |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const formulaDialog = ref(false) |
| | | const openFormulaDialog = () => { |
| | | formulaDialog.value = true |
| | | } |
| | | |
| | | // 番茄钟移动 |
| | | const isMove = ref<boolean>(false) |
| | | const position = reactive({x:100,y:100}) |
| | | const dragOffset = reactive({x:0,y:0}) |
| | | const mouseDown = (e: MouseEvent) => { |
| | | isMove.value = true |
| | | dragOffset.x = e.clientX - position.x |
| | | dragOffset.y = e.clientY - position.y |
| | | document.addEventListener('mousemove', mouseMove) |
| | | document.addEventListener('mouseup', mouseUp) |
| | | } |
| | | const mouseUp = (e: MouseEvent) => { |
| | | isMove.value = false |
| | | document.removeEventListener('mousemove', mouseMove) |
| | | document.removeEventListener('mouseup', mouseUp) |
| | | } |
| | | const mouseMove = (e: MouseEvent) => { |
| | | if (isMove.value) { |
| | | position.x = e.clientX - dragOffset.x |
| | | position.y = e.clientY - dragOffset.y |
| | | } |
| | | } |
| | | </script> |
| | |
| | | } |
| | | |
| | | .questionList { |
| | | height: 83% |
| | | height: 83%; |
| | | } |
| | | |
| | | .question-bottom { |
| | |
| | | width: 300px; |
| | | padding: 20px 0; |
| | | background-color: #fff; |
| | | |
| | | li { |
| | | cursor: pointer; |
| | | width: 65px; |
| | |
| | | z-index: 96; |
| | | background: rgba(255, 255, 255, 0.2); |
| | | } |
| | | .watch-box { |
| | | display: flex; |
| | | align-items: center; |
| | | position: absolute; |
| | | background-color: #555; |
| | | color: #fff; |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | width: max-content; |
| | | p { |
| | | cursor: move; |
| | | padding: 0 8px; |
| | | font-size: 18px; |
| | | border-radius: 4px; |
| | | margin-right: 10px; |
| | | background-color: #666; |
| | | } |
| | | span { |
| | | cursor: pointer; |
| | | border-right: 1px solid #fff; |
| | | padding: 0 4px; |
| | | font-size: 14px; |
| | | &:last-child { |
| | | border-right: none; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .menu { |
| | | padding-top: 20px; |
| | | |
| | | li>div { |
| | | li > div { |
| | | // height: 50px; |
| | | padding: 10px 36px; |
| | | padding: 10px 36px 10px 25px; |
| | | font-size: 16px; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | |
| | | .wendabox { |
| | | width: 100%; |
| | | height: 95vh; |
| | | height: 82vh; |
| | | padding:20px; |
| | | |
| | | iframe { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .whiteBoardBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 2000; |
| | | background-color: rgba(2, 2, 2, 0.3); |
| | | } |
| | | |
| | | .myDialogs, |
| | |
| | | right: 0px !important; |
| | | } |
| | | |
| | | .el-dialog__body { |
| | | padding: 20px !important; |
| | | } |
| | | // .el-dialog__body { |
| | | // padding: 20px !important; |
| | | // } |
| | | |
| | | .el-dialog__footer { |
| | | padding: 10px 20px 20px !important; |
| | |
| | | |
| | | .wordBox { |
| | | height: 600px; |
| | | width: 100%; |
| | | overflow-y: scroll; |
| | | |
| | | img { |
| | | display: block; |
| | | margin: 0 auto; |
| | | width: 90%; |
| | | height: auto; |
| | | box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1); |
| | | object-fit: contain; |
| | | } |
| | | } |
| | | |
| | | .imgUrlBox { |
| | |
| | | bottom: 30px; |
| | | left: 50px; |
| | | } |
| | | .iframe-box { |
| | | width: 100%; |
| | | height: 800px; |
| | | } |
| | | </style> |