| | |
| | | <template> |
| | | <div class="homeBox"> |
| | | <div class="headerBox"> |
| | | <!-- <span class="logoTxt">北京师范大学出版集团</span> --> |
| | | <img :src="logo" /> |
| | | |
| | | <img :src="logo" v-if="bookConfig.textbookOwnership == '北京师范大学出版集团'" /> |
| | | <!-- <span class="logoTxt" v-else>铁道出版社</span> --> |
| | | <span></span> |
| | | <div class="userInfoBox"> |
| | | <div></div> |
| | | <div></div> |
| | | <div class="userName" v-if="userInfo.name">{{userInfo.name}}</div> |
| | | <div><div class="layout hover" @click="layoutBtn">退出</div></div> |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <!-- 菜单 --> |
| | | <div class="menuBox"> |
| | | <div |
| | | :class="['menuItem', activeMenu == item.name ? 'active' : '']" |
| | | v-for="(item, index) in menuData" |
| | | :key="index" |
| | | @click="menuItemClick(item.name)" |
| | | > |
| | | <div class="menuIcon imgBox"> |
| | | <img :src="item.icon" /> |
| | | <div v-for="(item, index) in menuData" :key="index" @click="menuItemClick(item.name)"> |
| | | <div :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-if="item.isShow"> |
| | | <div class="menuIcon imgBox"> |
| | | <img :src="item.icon" /> |
| | | </div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | <!-- <div class="reload hover" @click="reload()">刷新</div> --> |
| | | <!-- 设置 --> |
| | |
| | | @keyup.enter="searchBook" |
| | | > |
| | | <template #prefix> |
| | | <el-icon class="hover"><Search /></el-icon> |
| | | <el-icon><Search /></el-icon> |
| | | </template> |
| | | <template #suffix> |
| | | <svg @click="searchBook" 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-list-search hover"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M18.5 18.5l2.5 2.5" /><path d="M4 6h16" /><path d="M4 12h4" /><path d="M4 18h4" /></svg> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | |
| | | <el-tree |
| | | ref="catalogTree" |
| | | default-expand-all="true" |
| | | expand-on-click-node="false" |
| | | :expand-on-click-node="false" |
| | | :data="catalogueData" |
| | | :props="defaultProps" |
| | | v-if="catalogueData.length > 0" |
| | |
| | | </div> |
| | | </template> |
| | | </el-tree> |
| | | <div v-if="catalogueData.length == 0"> |
| | | <div v-else> |
| | | <el-empty :image-size="60" description="暂无数据" /> |
| | | </div> |
| | | </div> |
| | |
| | | <template #prefix> |
| | | <el-icon><Search /></el-icon> |
| | | </template> |
| | | <template #suffix> |
| | | <svg @click="searchBook" 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-list-search hover"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M18.5 18.5l2.5 2.5" /><path d="M4 6h16" /><path d="M4 12h4" /><path d="M4 18h4" /></svg> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 菜单内容收起 --> |
| | | <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"><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> |
| | | <!-- <img :src="shouqiL" @click="menuState.open = false" /> --> |
| | | </div> |
| | | </div> |
| | | <!-- 菜单内容收起 --> |
| | | <div class="menuStateBox" v-if="menuState.open"> |
| | | <img :src="shouqiL" @click="menuState.open = false" /> |
| | | </div> |
| | | |
| | | <!-- 中间内容 --> |
| | | <div class="pageBox"> |
| | | <!-- 头部显示 --> |
| | |
| | | </div> |
| | | <div class="rightBox"> |
| | | <div class="pageSizeBox"> |
| | | <div><img :src="zoomIn" @click="changePageSize('add')" /></div> |
| | | <div>{{ headerData.pageSize }}%</div> |
| | | <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> |
| | | <div>{{ headerData.pageSize }}%</div> |
| | | <div><img :src="zoomIn" @click="changePageSize('add')" /></div> |
| | | </div> |
| | | <!-- <div class="brushImgBox"> |
| | | <div @click="jumpContent('note' + index)"> |
| | |
| | | <div class="pageBox-content"> |
| | | <div class="content-box"> |
| | | <div |
| | | id="container" |
| | | @mousedown="handleMouseDown" |
| | | @mousemove="handleMousemove" |
| | | :style="{ background: settingForm.bgColorActive }" |
| | | id="container" :style="{ background: settingForm.bgColorActive }" |
| | | ></div> |
| | | <!-- 画笔画布 --> |
| | | <div class="canvas-box" v-show="canvasShow"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 教学组件 --> |
| | | <div class="toolBox"> |
| | | <div class="toolTitle"> |
| | | <span>{{ toolState.open ? '学习组件' : '组件' }}</span> |
| | | <div class="text"></div> |
| | | </div> |
| | | <div class="menuList"> |
| | | <ul class="menu"> |
| | | <li |
| | | v-for="item in teachToolsMenuData" |
| | | :key="item.key" |
| | | :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'" |
| | | :style="!toolState.open ? 'padding:10px 15px' : ''" |
| | | @click="selectTeachTools(item)" |
| | | > |
| | | <img :src="item.icon" alt="" /> |
| | | <span v-if="toolState.open">{{ item.name }}</span> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div :class="['openBox', toolState.open ? 'right' : '']"> |
| | | <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="false"> |
| | | <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <el-tab-pane label="备课组件" name="first"> |
| | | <div class="tabBox"> |
| | | <div class="insertSelect"> |
| | | <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')" |
| | | > |
| | | <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" /> |
| | | <div>插入答题</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="上课组件" name="second"> |
| | | <div class="tabBox"> |
| | | <div class="giveLessons hover" @click="giveLessonsClick()"> |
| | | <img :src="xiake" /> |
| | | <span>{{ classStart ? '上课' : '下课' }}</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </div> |
| | | <!-- 画笔工具栏 --> |
| | | <div |
| | | draggable="true" |
| | | class="draggableBox" |
| | | @dragstart="dragstart($event)" |
| | | @dragend="dragend($event)" |
| | | :style="`left:${floatingToolData.elLeft}px;top:${floatingToolData.elTop}px`" |
| | | > |
| | | <!-- 画笔组件 --> |
| | | <div |
| | | class="hover" |
| | | v-for="item in floatingToolBox" |
| | | :key="item.name" |
| | | @click="floatItemHandle(item)" |
| | | @mouseover="floatOverHander(item)" |
| | | @mouseout="floatOutHander(item)" |
| | | > |
| | | <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')"> |
| | | <img :src="hide" /> |
| | | <div>隐藏</div> |
| | | </div> |
| | | <div class="labelItem hover" @click="labelShow('show')"> |
| | | <img :src="show" /> |
| | | <div>显示</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <template #reference> |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | > |
| | | <img |
| | | :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" |
| | | alt="" |
| | | /> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | v-else |
| | | > |
| | | <img |
| | | :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" |
| | | alt="" |
| | | /> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="brushBox" |
| | | :style="{ left: brushBoxLeft + 'px' }" |
| | | v-if="floatingToolData.activeToolData == '画笔'" |
| | | > |
| | | <div class="toolList"> |
| | |
| | | </div> |
| | | <template #reference> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('huabi')"> |
| | | <div class="imgBox"> |
| | | <img :src="huabi2" alt="" /> |
| | | </div> |
| | | <div class="text">画笔</div> |
| | | <el-tooltip class="box-item" effect="dark" content="画笔" placement="bottom"> |
| | | <img :src="huabi2" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | <!-- <div class="text">画笔</div> --> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | |
| | | </div> |
| | | <template #reference> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('wenzi')"> |
| | | <div class="imgBox"> |
| | | <img :src="wenzi2" alt="" /> |
| | | </div> |
| | | <div class="text">文字</div> |
| | | <el-tooltip class="box-item" effect="dark" content="文字" placement="bottom"> |
| | | <img :src="wenzi2" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | |
| | | </div> |
| | | <template #reference> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('tuxing')"> |
| | | <div class="imgBox"> |
| | | <img :src="tuxing" alt="" /> |
| | | </div> |
| | | <div class="text">图形</div> |
| | | <el-tooltip class="box-item" effect="dark" content="图形" placement="bottom"> |
| | | <img :src="tuxing" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | |
| | | <div class="text">橡皮擦</div> |
| | | </div> --> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('chexiao')"> |
| | | <div class="imgBox"> |
| | | <img :src="clearPrevious" alt="" /> |
| | | </div> |
| | | <div class="text">撤销</div> |
| | | <el-tooltip class="box-item" effect="dark" content="撤销" placement="bottom"> |
| | | <img :src="clearPrevious" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | </div> |
| | | <!-- <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> |
| | | <div class="imgBox"> |
| | |
| | | <div class="text">重做</div> |
| | | </div> --> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('qingchu')"> |
| | | <div class="imgBox"> |
| | | <img :src="qingchu2" alt="" /> |
| | | </div> |
| | | <div class="text">清除</div> |
| | | <el-tooltip class="box-item" effect="dark" content="清除" placement="bottom"> |
| | | <img :src="qingchu2" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="floatToolItem layOutTool hover" @click="toolSelectHandle('tuichu')"> |
| | | <div class="imgBox"> |
| | | <img :src="tuichu" alt="" /> |
| | | </div> |
| | | <div class="text">退出</div> |
| | | <div class="layOutTool"></div> |
| | | <div class="floatToolItem hover" @click="toolSelectHandle('tuichu')"> |
| | | <el-tooltip class="box-item" effect="dark" content="退出" placement="bottom"> |
| | | <img :src="tuichu" alt="" class="imgBox"/> |
| | | </el-tooltip> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 教学组件 --> |
| | | <div class="toolBox"> |
| | | <div class="toolTitle"> |
| | | <span>{{ toolState.open ? '学习组件' : '组件' }}</span> |
| | | <div class="text"></div> |
| | | </div> |
| | | <div class="menuList"> |
| | | <ul class="menu" v-if="teachToolsMenuData.length > 0"> |
| | | <li v-for="item in teachToolsMenuData" :key="item.key"> |
| | | <div |
| | | :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'" |
| | | :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' : '']"> |
| | | <!-- <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"><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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 12l-10 0" /><path d="M14 12l-4 4" /><path d="M14 12l-4 -4" /><path d="M20 4l0 16" /></svg> |
| | | </div> |
| | | <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"> |
| | | <div class="insertSelect"> |
| | | <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')" |
| | | > |
| | | <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" /> |
| | | <div>插入答题</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="上课组件" name="second"> |
| | | <div class="tabBox"> |
| | | <div class="giveLessons hover" @click="giveLessonsClick()"> |
| | | <img :src="xiake" /> |
| | | <span>{{ classStart ? '上课' : '下课' }}</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </div> |
| | | <!-- 画笔工具栏 --> |
| | | <div |
| | | draggable="true" |
| | | class="draggableBox" |
| | | :style="`left:${floatingToolData.elLeft}px`" |
| | | v-if="floatingToolBox.length > 0" |
| | | > |
| | | <div |
| | | class="hover" |
| | | 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 == '标记'" |
| | | > |
| | | <div class="popinnerBox"> |
| | | <div class="label" v-if="floatingToolData.activeToolData == '标记'"> |
| | | <div class="labelItem hover" @click="labelShow('hide')"> |
| | | <img :src="hide" /> |
| | | <div>隐藏</div> |
| | | </div> |
| | | <div class="labelItem hover" @click="labelShow('show')"> |
| | | <img :src="show" /> |
| | | <div>显示</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <template #reference> |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | > |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | :content="item.name" |
| | | placement="right" |
| | | > |
| | | <img :src="item.icon" alt="" /> |
| | | </el-tooltip> |
| | | <!-- <div class="text">{{ item.name }}</div> --> |
| | | </div> |
| | | </template> |
| | | </el-popover> |
| | | <div |
| | | :class=" |
| | | floatingToolData.activeToolData == item.name |
| | | ? 'floatToolActive floatToolItem' |
| | | : 'floatToolItem' |
| | | " |
| | | v-else |
| | | > |
| | | <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> |
| | | <img :src="item.icon" alt="" /> |
| | | </el-tooltip> |
| | | <!-- <div class="text">{{ item.name }}</div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 选中工具栏 --> |
| | | <div |
| | | class="dialogToolBox" |
| | |
| | | </div> |
| | | <div class="toolSelectBox" v-show="!(toolActive == '高亮' || toolActive == '划线')"> |
| | | <div |
| | | :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" |
| | | v-for="item in dialogToolList" |
| | | :key="item.icon" |
| | | @click="dialogToolHandle(item)" |
| | | @mouseover="dialogOverHander(item)" |
| | | @mouseout="dialogOutHander(item)" |
| | | > |
| | | <img :src="item.name == toolActive ? item.activeIcon : item.icon" alt="" /> |
| | | <span>{{ item.name }}</span> |
| | | <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> |
| | | <!-- <span>{{ item.name }}</span> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | v-show="lineDelete.showLineDelete" |
| | | :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" |
| | | > |
| | | <el-button @click="delUserKey">删除</el-button> |
| | | <!-- <el-button @click="delUserKey">删除</el-button> --> |
| | | <div class="dialogToolItem"> |
| | | <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom"> |
| | | <img :src="trash" @click="delUserKey"/> |
| | | </el-tooltip> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog"> |
| | |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import useClipboard from 'vue-clipboard3' |
| | | const { toClipboard } = useClipboard() |
| | | const request = inject('request') |
| | | const MG: any = inject('MG') |
| | | const toolClass = inject('toolClass') |
| | | const qiankunActions = inject('qiankunActions') |
| | | //获取路由器 |
| | |
| | | import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png' |
| | | import xiake from '../assets/images/operation/xiake.png' |
| | | |
| | | import huabi from '../assets/images/operation/huabi-w.png' |
| | | import huabi1 from '../assets/images/operation/huabi-b.png' |
| | | import qingchu from '../assets/images/operation/Clearaway-w.png' |
| | | import qingchu1 from '../assets/images/operation/Clearaway-b.png' |
| | | import wenzi from '../assets/images/operation/wenzi-w.png' |
| | | import wenzi1 from '../assets/images/operation/wenzi-b.png' |
| | | import huabi from '../assets/images/operation/brush.svg' |
| | | import wenzi2 from '../assets/images/operation/wenzi.png' |
| | | import biaoqianw from '../assets/images/operation/biaoqian-w.png' |
| | | import biaoqian1 from '../assets/images/operation/biaoqian-b.png' |
| | | import baiban from '../assets/images/operation/baiban-w.png' |
| | | import baiban1 from '../assets/images/operation/baiban-b.png' |
| | | import biaozhu from '../assets/images/operation/biaozhu-w.png' |
| | | import biaozhu1 from '../assets/images/operation/biaozhu-b.png' |
| | | import jieping from '../assets/images/operation/screenshot-w.png' |
| | | import jieping1 from '../assets/images/operation/screenshot-b.png' |
| | | import clear from '../assets/images/operation/clear.png' |
| | | import biaoqianw from '../assets/images/operation/bookmark-plus.svg' |
| | | import baiban from '../assets/images/operation/chalkboard.svg' |
| | | import biaozhu from '../assets/images/operation/pencil-minus.svg' |
| | | import jieping from '../assets/images/operation/crop.svg' |
| | | import clearPrevious from '../assets/images/operation/clearPrevious.png' |
| | | import hide from '../assets/images/operation/hide.png' |
| | | import show from '../assets/images/operation/show.png' |
| | |
| | | import zoomIn from '../assets/images/operation/zoomIn.png' |
| | | import zoomOut from '../assets/images/operation/zoomOut.png' |
| | | import huabi2 from '../assets/images/operation/huabi.svg' |
| | | import trash from '../assets/images/operation/trash.svg' |
| | | |
| | | import shanchu from '../assets/images/operation/delete.png' |
| | | import bianji from '../assets/images/operation/bianji.png' |
| | |
| | | const screenWidth = ref( |
| | | window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
| | | ) |
| | | const brushBoxLeft = ref(500) |
| | | let userInfo = ref({}) |
| | | let microApp = null // 微应用实例 |
| | | const bookConfig = ref({}) |
| | | const activeCatalog = ref() |
| | | onMounted(() => { |
| | | getUserInfo() |
| | | setTimeout(() => { |
| | | canvasWith.value = document.querySelector('.content-box').offsetWidth |
| | | canvasheight.value = document.querySelector('.content-box').offsetHeight |
| | |
| | | if (screenWidth.value < 1180) { |
| | | menuState.open = false |
| | | toolState.open = false |
| | | if (!menuState.open) { |
| | | floatingToolData.elLeft = 90 |
| | | } |
| | | } |
| | | brushBoxLeft.value = (screenWidth.value - 450) / 2 |
| | | window.onresize = () => { |
| | | return (() => { |
| | | screenWidth.value = |
| | |
| | | console.log(window.qiankunActions) |
| | | window.qiankunActions.setGlobalState({ |
| | | state: 1, // 加载子应用 |
| | | bookId: localStorage.getItem('bookId'), |
| | | windowSelection: (data) => { |
| | | // 绑定子应用选择监听事件 |
| | | console.log(data, '子应用选择') |
| | |
| | | // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) |
| | | }) |
| | | |
| | | |
| | | watch( |
| | | () => screenWidth.value, |
| | | (val) => { |
| | |
| | | if (screenWidth.value < 1180) { |
| | | menuState.open = false |
| | | toolState.open = false |
| | | floatingToolData.elLeft = 100 |
| | | if (!menuState.open) { |
| | | floatingToolData.elLeft = 90 |
| | | } |
| | | } else { |
| | | floatingToolData.elLeft = 300 |
| | | } |
| | | } |
| | | ) |
| | | |
| | | |
| | | const getUserInfo = () => { |
| | | MG.identity.getCurrentAppUser().then((res) => { |
| | | console.log(res, '用户信息') |
| | | if(res){ |
| | | let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher') |
| | | let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo') |
| | | let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone') |
| | | let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword') |
| | | |
| | | if (nameAndPassword) { |
| | | userInfo.value = { |
| | | name: nameAndPassword.credential, |
| | | } |
| | | localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) |
| | | }else if(teacherRole && teacherInfos){ |
| | | userInfo.value = { |
| | | name: teacherInfos.name, |
| | | role: 'Teacher', |
| | | roleId: teacherRole.role.id |
| | | } |
| | | localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) |
| | | } else if(phoneInfo){ |
| | | userInfo.value = { |
| | | name: phoneInfo.credential, |
| | | } |
| | | localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) |
| | | } |
| | | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | let menuData = [] //菜单 |
| | | let teachToolsMenuData = [] //右侧学习组件 |
| | | let floatingToolBox = [] //中间悬浮组件 |
| | | let dialogToolList =[] //选中文字操作 |
| | | //获取当前书籍所需组件 |
| | | const getTextbookComponents = () => {} |
| | | const getTextbookComponents = () => { |
| | | menuData = [] |
| | | teachToolsMenuData = [] |
| | | floatingToolBox = [] |
| | | menuData = [ |
| | | { |
| | | name: '目录', |
| | | icon: mulu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('1E16353F') > -1 |
| | | }, |
| | | { |
| | | name: '笔记', |
| | | icon: biji, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('A3298FCF') > -1 |
| | | }, |
| | | { |
| | | name: '资源', |
| | | icon: ziyuan, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('A04689E6') > -1 |
| | | }, |
| | | { |
| | | name: '知识图谱', |
| | | icon: zhishitupu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('6BE6A3DC') > -1 |
| | | }, |
| | | { |
| | | name: '截图', |
| | | icon: jietu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1 |
| | | }, |
| | | { |
| | | name: '书签', |
| | | icon: biaoqian, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('CF2E1400') > -1 |
| | | } |
| | | ] |
| | | teachToolsMenuData = [ |
| | | { |
| | | name: 'AI智能问答', |
| | | icon: aIzhinengwenda, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('E30C0843') > -1 |
| | | }, |
| | | { |
| | | name: '词典', |
| | | icon: cidian, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('83FB80FD') > -1 |
| | | }, |
| | | { |
| | | name: '生字卡片', |
| | | icon: shengzikapian, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('38D32EE3') > -1 |
| | | }, |
| | | { |
| | | name: '互动问答', |
| | | icon: hudongwenda, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('31F123A4') > -1 |
| | | }, |
| | | { |
| | | name: '思维导图', |
| | | icon: siweidaotu, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('94FF5E48') > -1 |
| | | }, |
| | | { |
| | | name: 'GGB函数工具', |
| | | icon: GGB, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('43C805B2') > -1 |
| | | }, |
| | | { |
| | | name: '几何工具', |
| | | icon: jihe, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('FFFED2EF') > -1 |
| | | }, |
| | | { |
| | | name: 'Python', |
| | | icon: python, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('1D48E00E') > -1 |
| | | }, |
| | | { |
| | | name: 'C++', |
| | | icon: cjiajia, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('8E953BF7') > -1 |
| | | }, |
| | | { |
| | | name: 'Javascript', |
| | | icon: javascript, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('25AC6CC2') > -1 |
| | | }, |
| | | { |
| | | name: '模型工具', |
| | | icon: moxinggongju, |
| | | isShow: bookConfig.value.textbookComponents.indexOf('366F6CF3') > -1 |
| | | } |
| | | ] |
| | | floatingToolBox = [ |
| | | { |
| | | icon: huabi, |
| | | name: '画笔', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1 |
| | | }, |
| | | { |
| | | icon: baiban, |
| | | name: '白板', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1 |
| | | }, |
| | | { |
| | | icon: biaozhu, |
| | | name: '标记', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('2E613A8F') > -1 |
| | | }, |
| | | { |
| | | icon: biaoqianw, |
| | | name: '书签', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('D2D30448') > -1 |
| | | }, |
| | | { |
| | | icon: jieping, |
| | | name: '截屏', |
| | | isShow: bookConfig.value.textbookComponents.indexOf('86F0A1B8') > -1 |
| | | } |
| | | ] |
| | | dialogToolList = [ |
| | | { icon: gaoliang,name: '高亮',isShow: bookConfig.value.textbookComponents.indexOf('395B91FC') > -1 }, |
| | | { icon: huaxian,name: '划线',isShow: bookConfig.value.textbookComponents.indexOf('229EC161') > -1 }, |
| | | { icon: biji2,name: '笔记',isShow: bookConfig.value.textbookComponents.indexOf('BC9B0CBD') > -1 }, |
| | | { icon: biaozhu2,name: '标注',isShow: bookConfig.value.textbookComponents.indexOf('A63EE24F') > -1 }, |
| | | { icon: fuzhi,name: '复制',isShow: bookConfig.value.textbookComponents.indexOf('7D5594B3') > -1 }, |
| | | { icon: AIyuedu,name: 'AI阅读',isShow: bookConfig.value.textbookComponents.indexOf('C05AA457') > -1 }, |
| | | { icon: cidian2,name: '词典',isShow: bookConfig.value.textbookComponents.indexOf('83FB80FD') > -1 }, |
| | | { icon: baidu,name: '百科',isShow: bookConfig.value.textbookComponents.indexOf('65F95274') > -1 } |
| | | ] |
| | | } |
| | | |
| | | //获取目录 |
| | | const catalogueData = ref([]) |
| | | const getCatalogueData = () => { |
| | | axios |
| | | .get(bookConfig.value.resourceUrl + '/1/information.json') |
| | | .get(bookConfig.value.resourceUrl + '/information.json') |
| | | .then(function (response) { |
| | | console.log(response.data, '目录') |
| | | var json = response.data |
| | |
| | | |
| | | //获取资源 |
| | | //资源分类 |
| | | const classifySelectList = ref() |
| | | const classifySelectList = ref([]) |
| | | //资源类型 |
| | | const resourceType = ref('default') //默认/教师 |
| | | const activeClassify = ref('') |
| | |
| | | |
| | | const getResourceData = () => { |
| | | axios |
| | | .get(bookConfig.value.resourceUrl + '/1/resource.json?t=12') |
| | | .get(bookConfig.value.resourceUrl + '/resource.json?t=12') |
| | | .then(function (response) { |
| | | var json = response.data |
| | | // 处理获取到的json数据 |
| | |
| | | resourType.value = data.resourceType |
| | | if (data.resourceType == '视频') { |
| | | resourVisble.value = true |
| | | testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 |
| | | if(data.md5){ |
| | | testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 |
| | | }else{ |
| | | testVideo.value = bookConfig.value.resourceUrl + '/' + data.resourcePath |
| | | } |
| | | |
| | | } else if (data.resourceType == 'word') { |
| | | testWord.value = bookConfig.value.resourceUrl + '/resourceData/' + data.name |
| | | testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath |
| | | } else { |
| | | if (window.qiankunState && window.qiankunState.gotoPage) { |
| | | window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination)) |
| | |
| | | searchShow.value = true |
| | | } |
| | | } |
| | | // 菜单 |
| | | const menuData = reactive([ |
| | | { |
| | | name: '目录', |
| | | icon: mulu |
| | | }, |
| | | { |
| | | name: '笔记', |
| | | icon: biji |
| | | }, |
| | | { |
| | | name: '资源', |
| | | icon: ziyuan |
| | | }, |
| | | { |
| | | name: '知识图谱', |
| | | icon: zhishitupu |
| | | }, |
| | | { |
| | | name: '截图', |
| | | icon: jietu |
| | | }, |
| | | { |
| | | name: '书签', |
| | | icon: biaoqian |
| | | } |
| | | ]) |
| | | |
| | | // 选中菜单 |
| | | const activeMenu = ref('目录') |
| | | |
| | |
| | | ], |
| | | bgColorActive: '#FBF9F4' |
| | | }) |
| | | |
| | | watch( |
| | | () => menuState.open, |
| | | (val) => { |
| | | if (menuState.open == false) { |
| | | floatingToolData.elLeft = 90 |
| | | } else { |
| | | floatingToolData.elLeft = 390 |
| | | } |
| | | } |
| | | ) |
| | | |
| | | const fontSizeSelect = (item) => { |
| | | settingForm.fontSizeActive = item.key |
| | | window.qiankunActions.setGlobalState({ |
| | |
| | | } |
| | | } |
| | | |
| | | // 右侧工具 |
| | | const teachToolsMenuData = reactive([ |
| | | { |
| | | name: 'AI智能问答', |
| | | icon: aIzhinengwenda |
| | | }, |
| | | { |
| | | name: '词典', |
| | | icon: cidian |
| | | }, |
| | | { |
| | | name: '生字卡片', |
| | | icon: shengzikapian |
| | | }, |
| | | { |
| | | name: '互动问答', |
| | | icon: hudongwenda |
| | | }, |
| | | { |
| | | name: '思维导图', |
| | | icon: siweidaotu |
| | | }, |
| | | { |
| | | name: 'GGB函数工具', |
| | | icon: GGB |
| | | }, |
| | | { |
| | | name: '几何工具', |
| | | icon: jihe |
| | | }, |
| | | { |
| | | name: 'Python', |
| | | icon: python |
| | | }, |
| | | { |
| | | name: 'C++', |
| | | icon: cjiajia |
| | | }, |
| | | { |
| | | name: 'Javascript', |
| | | icon: javascript |
| | | }, |
| | | { |
| | | name: '模型工具', |
| | | icon: moxinggongju |
| | | } |
| | | ]) |
| | | const baiduVisible = ref(false) |
| | | const wendaVisible = ref(false) |
| | | const cidianVisible = ref(false) |
| | |
| | | } |
| | | |
| | | //画布悬浮操作 |
| | | const floatingToolBox = reactive([ |
| | | { |
| | | icon: huabi, |
| | | activeIcon: huabi1, |
| | | name: '画笔' |
| | | }, |
| | | { |
| | | activeIcon: baiban1, |
| | | icon: baiban, |
| | | name: '白板' |
| | | }, |
| | | { |
| | | activeIcon: biaozhu1, |
| | | icon: biaozhu, |
| | | name: '标记' |
| | | }, |
| | | { |
| | | activeIcon: biaoqian1, |
| | | icon: biaoqianw, |
| | | name: '书签' |
| | | }, |
| | | { |
| | | activeIcon: jieping1, |
| | | icon: jieping, |
| | | name: '截屏' |
| | | } |
| | | ]) |
| | | |
| | | let canvas = null |
| | | const floatingToolData = reactive({ |
| | | activeToolData: '', //选中工具 |
| | | elLeft: 400, |
| | | elTop: 300, |
| | | elLeft: 390, |
| | | startclientx: 0, |
| | | startclienty: 0 |
| | | }) |
| | | |
| | | //画布 |
| | | const canvasShow = ref(false) |
| | | |
| | | const floatOverHander = (item) => { |
| | | const curIndex = floatingToolBox.findIndex((f) => f.name == item.name) |
| | | switch (curIndex) { |
| | | case 0: |
| | | floatingToolBox[0].icon = huabi1 |
| | | break |
| | | case 1: |
| | | floatingToolBox[1].icon = baiban1 |
| | | break |
| | | case 2: |
| | | floatingToolBox[2].icon = biaozhu1 |
| | | break |
| | | case 3: |
| | | floatingToolBox[3].icon = biaoqian1 |
| | | break |
| | | case 4: |
| | | floatingToolBox[4].icon = jieping1 |
| | | break |
| | | } |
| | | } |
| | | const floatOutHander = (item) => { |
| | | const curIndex = floatingToolBox.findIndex((f) => f.name == item.name) |
| | | switch (curIndex) { |
| | | case 0: |
| | | floatingToolBox[0].icon = huabi |
| | | break |
| | | case 1: |
| | | floatingToolBox[1].icon = baiban |
| | | break |
| | | case 2: |
| | | floatingToolBox[2].icon = biaozhu |
| | | break |
| | | case 3: |
| | | floatingToolBox[3].icon = biaoqianw |
| | | break |
| | | case 4: |
| | | floatingToolBox[4].icon = jieping |
| | | break |
| | | } |
| | | } |
| | | |
| | | //截图事件 |
| | | const nameRef = ref() |
| | |
| | | break |
| | | } |
| | | } |
| | | const dragend = (e) => { |
| | | let x = e.clientX - floatingToolData.startclientx |
| | | let y = e.clientY - floatingToolData.startclienty |
| | | if (floatingToolData.elLeft + x > 0 || floatingToolData.elTop + y > 0) { |
| | | floatingToolData.elLeft = e.x - 40 |
| | | floatingToolData.elTop = e.y - 60 |
| | | } |
| | | } |
| | | const dragstart = (e) => { |
| | | floatingToolData.startclientx = e.clientX |
| | | floatingToolData.startclienty = e.clientY |
| | | } |
| | | |
| | | //画笔操作栏事件 |
| | | const toolSelectData = reactive({ |
| | | activeTool: '', |
| | |
| | | chapterNum: currentChapter.value, |
| | | chapterName: chapterData.label |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'reMark', |
| | |
| | | value: JSON.stringify(reMarkData.value) |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | }) |
| | | .then((res) => { |
| | | floatingToolData.activeToolData = '' |
| | | getReMarkList() |
| | |
| | | const getReMarkList = () => { |
| | | reMarkList.value = [] |
| | | reMarkData.value = [] |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'reMark', |
| | | keys: [bookConfig.value.bookId] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0 && res[0].value) { |
| | | reMarkData.value = JSON.parse(res[0].value) |
| | | let list = JSON.parse(res[0].value) |
| | |
| | | //删除书签 |
| | | const deleteReMark = (item) => { |
| | | let list = reMarkList.value.filter((itemData) => itemData.id !== item.id) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'reMark', |
| | |
| | | value: JSON.stringify(list) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | ElMessage({ |
| | | message: '删除书签成功!', |
| | | type: 'success' |
| | |
| | | } |
| | | |
| | | screenshotLoading.value = true |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'screenshot', |
| | |
| | | value: JSON.stringify(screenshotData.value) |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | }) |
| | | .then((res) => { |
| | | screenshotLoading.value = false |
| | | getScreenshotList() |
| | |
| | | const getScreenshotList = () => { |
| | | screenshotData.value = [] |
| | | screenshotList.value = [] |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'screenshot', |
| | | keys: [bookConfig.value.bookId] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0 && res[0].value) { |
| | | screenshotData.value = JSON.parse(res[0].value) |
| | | let list = JSON.parse(res[0].value) |
| | |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'screenshot', |
| | |
| | | value: JSON.stringify(list) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | ElMessage({ |
| | | message: '删除截图成功!', |
| | | type: 'success' |
| | |
| | | const toolActive = ref('') |
| | | const colorActive = ref('') |
| | | const noteColorActive = ref('') |
| | | const dialogToolList = reactive([ |
| | | { icon: gaoliang, activeIcon: gaoliang1, name: '高亮' }, |
| | | { icon: huaxian, activeIcon: huaxian1, name: '划线' }, |
| | | { icon: biji2, activeIcon: biji1, name: '笔记' }, |
| | | { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' }, |
| | | { icon: fuzhi, activeIcon: fuzhi1, name: '复制' }, |
| | | { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' }, |
| | | { icon: cidian2, activeIcon: cidian1, name: '词典' }, |
| | | { icon: baidu, activeIcon: baidu, name: '百科' } |
| | | // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' } |
| | | // { icon: cidian2, activeIcon: cidian1, name: '翻译' } |
| | | ]) |
| | | |
| | | const colorSelectList = reactive([ |
| | | { |
| | | label: '黄色', |
| | |
| | | break |
| | | case '笔记': |
| | | formData.desc = '' |
| | | noteColorActive.value = '#F5E12A' |
| | | addNoteVisble.value = true |
| | | showToolBox.value = false |
| | | break |
| | |
| | | break |
| | | case '词典': |
| | | cidianVisible.value = true |
| | | console.log(dialogToolData.txt) |
| | | break |
| | | case '百科': |
| | | console.log('https://baike.baidu.com/item/' + dialogToolData.txt) |
| | |
| | | |
| | | break |
| | | } |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: dom, |
| | |
| | | value: JSON.stringify(data) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | showToolBox.value = false |
| | | addNoteVisble.value = false |
| | | colorActive.value = '' |
| | |
| | | } |
| | | |
| | | const getSignData = () => { |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'highLightData-' + bookConfig.value.bookId, |
| | | keys: activeCatalog.value.map((item) => item + '') |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0) { |
| | | for (let i = 0; i < res.length; i++) { |
| | | const item = res[i] |
| | |
| | | } |
| | | } |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'underline-' + bookConfig.value.bookId, |
| | | keys: activeCatalog.value.map((item) => item + '') |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0) { |
| | | for (let i = 0; i < res.length; i++) { |
| | | const item = res[i] |
| | |
| | | } |
| | | } |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'notes-' + bookConfig.value.bookId, |
| | | keys: activeCatalog.value.map((item) => item + '') |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0) { |
| | | for (let i = 0; i < res.length; i++) { |
| | | const item = res[i] |
| | |
| | | chapterList.push(item.chapter + '') |
| | | }) |
| | | scribeData.noteList = [] |
| | | request({ |
| | | url: '/identity/api/ApiGetAppUserKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.getUserKey({ |
| | | domain: 'notes-' + bookConfig.value.bookId, |
| | | keys: chapterList |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | if (res && res.length > 0) { |
| | | for (let i = 0; i < res.length; i++) { |
| | | const item = res[i] |
| | |
| | | break |
| | | } |
| | | let list = data[dialogToolData.chapter].filter((item) => item.id != ids) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: dom, |
| | |
| | | value: JSON.stringify(list) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | lineDelete.showLineDelete = false |
| | | if (window.qiankunState && window.qiankunState.delSign) |
| | | window.qiankunState.delSign({ ids: [ids] }) |
| | |
| | | itemNote.color = noteColorActive.value |
| | | } |
| | | }) |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'notes-' + bookConfig.value.bookId, |
| | |
| | | value: JSON.stringify(data.noteList) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | addNoteVisble.value = false |
| | | isUpdate.value = false |
| | | getNotesList() |
| | |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | request({ |
| | | url: '/identity/api/ApiAppUserSetKey', |
| | | method: 'post', |
| | | data: { |
| | | MG.identity.setUserKey({ |
| | | setKeyRequests: [ |
| | | { |
| | | domain: 'notes-' + bookConfig.value.bookId, |
| | |
| | | value: JSON.stringify(list) |
| | | } |
| | | ] |
| | | } |
| | | }).then((res) => { |
| | | }).then((res) => { |
| | | ElMessage({ |
| | | message: '删除笔记成功!', |
| | | type: 'success' |
| | |
| | | .userInfoBox { |
| | | display: flex; |
| | | align-items: center; |
| | | .userName{ |
| | | font-size: 18px; |
| | | margin-right:15px; |
| | | padding-right:15px; |
| | | border-right:1px solid #e0e0e0; |
| | | color: #2C2C2C; |
| | | } |
| | | .layout { |
| | | width: 69px; |
| | | height: 30px; |
| | |
| | | overflow: hidden; |
| | | flex: 1; |
| | | display: flex; |
| | | position: relative; |
| | | .menuBox { |
| | | width: 80px; |
| | | flex-shrink: 0; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-bottom: 1px solid #efefef; |
| | | } |
| | | .resourceBox { |
| | | padding: 10px 0; |
| | |
| | | .menuStateBox { |
| | | width: 25px; |
| | | height: 25px; |
| | | background: #fff; |
| | | border-radius: 3px 0px 0px 3px; |
| | | border: 1px solid #bce3ff; |
| | | position: fixed; |
| | | position: absolute; |
| | | line-height: 22px; |
| | | top: 50%; |
| | | left: 395px; |
| | | left: 380px; |
| | | text-align: center; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | z-index: 2; |
| | | img { |
| | | height: 10px; |
| | |
| | | .pageBox { |
| | | flex: 1; |
| | | font-size: 16px; |
| | | position: relative; |
| | | .pageBox-header { |
| | | height: 57px; |
| | | padding: 0 20px; |
| | |
| | | } |
| | | .menu { |
| | | padding-top: 20px; |
| | | li { |
| | | li > div { |
| | | // height: 50px; |
| | | padding: 10px 36px; |
| | | font-size: 16px; |
| | |
| | | } |
| | | |
| | | span { |
| | | width:80px; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | |
| | | height: 25px; |
| | | background: #fff; |
| | | border-radius: 3px 0px 0px 3px; |
| | | border: 1px solid #bce3ff; |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 67px; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | } |
| | | } |
| | | .right { |
| | | right: 215px !important; |
| | | right: 198px !important; |
| | | border-radius: 0px 3px 3px 0px !important; |
| | | } |
| | | .classRoomBox { |
| | |
| | | } |
| | | |
| | | .draggableBox { |
| | | width: 85px; |
| | | background-image: linear-gradient(to bottom, #0093ff, #005dff); |
| | | position: fixed; |
| | | height: 310px; |
| | | top: 300px; |
| | | left: 450px; |
| | | width: 40px; |
| | | background-image: linear-gradient(to bottom, #65bbf9, #1299fb); |
| | | // background-color: rgba(44, 44, 44, 0.5); |
| | | position: absolute; |
| | | // height: 310px; |
| | | top: 70px; |
| | | left: 380px; |
| | | z-index: 2000; |
| | | border-radius: 10px; |
| | | padding: 5px; |
| | | padding: 6px; |
| | | overflow: hidden; |
| | | .floatToolItem { |
| | | height: 60px; |
| | | margin: 10px 0; |
| | | height: 28px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | img { |
| | | margin-right: 8px; |
| | | } |
| | | .text { |
| | | margin-right: 5px; |
| | | } |
| | | } |
| | | .floatToolItem:hover, |
| | | .floatToolActive { |
| | | background-color: #fff; |
| | | color: #0093ff; |
| | | background-color: rgba(255, 255, 255, 0.3); |
| | | } |
| | | } |
| | | |
| | | .brushBox { |
| | | position: fixed; |
| | | // left: 40%; |
| | | bottom: 20px; |
| | | position: absolute; |
| | | width:290px; |
| | | bottom: 40px; |
| | | left: 0; |
| | | right: 0; |
| | | z-index: 99; |
| | | margin:auto; |
| | | border-radius: 5px; |
| | | background: #fff; |
| | | // padding: 10px; |
| | | overflow: hidden; |
| | | border: 1px solid #0093ff; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | .toolList { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .floatToolItem { |
| | | margin: 6px; |
| | | width: 46px; |
| | | margin: 6px 8px; |
| | | padding: 5px; |
| | | width: 30px; |
| | | border-radius: 5px; |
| | | text-align: center; |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | // flex: 1; |
| | | font-size: 14px; |
| | | .imgBox { |
| | | height: 18px; |
| | | width: 18px; |
| | | text-align: center; |
| | | margin: 0 auto; |
| | | margin-bottom: 5px; |
| | | } |
| | | } |
| | | .floatToolItem:hover { |
| | | background-color: rgba(44, 44, 44, 0.2); |
| | | } |
| | | .layOutTool { |
| | | padding-left: 15px; |
| | | height:20px; |
| | | margin-right:5px; |
| | | border-left: 1px solid #e0e0e0; |
| | | } |
| | | } |
| | |
| | | position: fixed; |
| | | z-index: 2; |
| | | .toolSelectBox { |
| | | height: 57px; |
| | | height: 40px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 12px; |
| | | overflow: hidden; |
| | | padding: 5px; |
| | | background-image: linear-gradient(to right, #0093ff, #005dff); |
| | | background-color: rgba(90,90,90,0.9); |
| | | // background-image: linear-gradient(to right, #0093ff, #005dff); |
| | | .dialogToolItem { |
| | | user-select: none; |
| | | width: 60px; |
| | | width: 26px; |
| | | font-size: 12px; |
| | | border-radius: 5px; |
| | | padding: 5px 0; |
| | | padding:3px; |
| | | margin:0 5px; |
| | | cursor: pointer; |
| | | text-align: center; |
| | | img { |
| | | margin: 0 auto; |
| | | display: block; |
| | | margin-bottom: 5px; |
| | | height: 16px; |
| | | } |
| | | span { |
| | | color: #fff; |
| | | } |
| | | } |
| | | .dialogToolItem:hover, |
| | | .active { |
| | | background-color: #fff; |
| | | span { |
| | | color: #0093ff; |
| | | } |
| | | background-color: rgba(255, 255, 255, 0.2); |
| | | // span { |
| | | // color: #0093ff; |
| | | // } |
| | | } |
| | | } |
| | | } |
| | |
| | | .lineDeleteBox { |
| | | position: fixed; |
| | | z-index: 2; |
| | | border: 1px solid #0093ff; |
| | | padding: 20px 8px; |
| | | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); |
| | | padding: 5px 20px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | .dialogToolItem{ |
| | | padding:3px; |
| | | border-radius: 5px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .dialogToolItem:hover{ |
| | | background-color: rgba(44, 44, 44, 0.2); |
| | | } |
| | | } |
| | | .wendabox { |
| | | width: 100%; |