From d7e53e63dd6c435e226d9f08cde31ca35131c911 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 14 四月 2025 15:30:33 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/views/readerPages/webHome.vue | 321 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 286 insertions(+), 35 deletions(-)
diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue
index f709147..2c9cb33 100644
--- a/src/views/readerPages/webHome.vue
+++ b/src/views/readerPages/webHome.vue
@@ -119,8 +119,8 @@
<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>
@@ -809,16 +809,24 @@
<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">
@@ -1156,6 +1164,11 @@
</div>
</div>
+ <!-- 鐧芥澘 -->
+ <div v-if="whiteBoard" class="whiteBoardBox">
+ <whiteBoardBox @whiteBoardClose="whiteBoardClose"></whiteBoardBox>
+ </div>
+
<el-dialog
title="璧勬簮"
align-center
@@ -1349,6 +1362,7 @@
import formula from '@/views/components/formula.vue'
import wrongQuestion from '@/views/components/wrongQuestion.vue'
import voiceReader from '@/views/components/voiceReader.vue'
+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'
@@ -1447,7 +1461,7 @@
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
@@ -1647,7 +1661,7 @@
console.log(res.datas, '鍥句功淇℃伅')
if (!res.datas.length) return
bookInfo.value = res.datas[0]
- if (res.datas[0].purchasedSaleMethodIdList.includes(res.datas[0].defaultSaleMethodId)) {
+ if (res.datas[0].purchasedSaleMethodIdList.indexOf(res.datas[0].defaultSaleMethodId) > -1) {
isBuy.value = true
} else {
isBuy.value = false
@@ -1726,11 +1740,7 @@
name: '鐭ヨ瘑鍥捐氨',
icon: zhishitupu,
isShow: bookConfig.value.textbookComponents.indexOf('6BE6A3DC') > -1
- },
- {
- name: '鎴浘',
- icon: jietu,
- isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1
+ // isShow: true
},
{
name: '涔︾',
@@ -1745,6 +1755,11 @@
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 = [
@@ -1835,6 +1850,7 @@
icon: baiban,
name: '鐧芥澘',
isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1
+ // isShow: true
},
{
icon: biaozhu,
@@ -2628,6 +2644,7 @@
const menuItemClick = (name) => {
searchText.value = ''
allSearchReault.value = []
+ listLoading.value = false
if (menuState.open && activeMenu.value == name) {
menuState.open = false
} else {
@@ -2808,12 +2825,11 @@
getExercisesList()
break
case '妫�绱�':
- listLoading.value = true
allSearchReault.value = []
- console.log(window.qiankunState.searchBookByKeyword)
if (window.qiankunState && 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) => {
@@ -2842,7 +2858,8 @@
}
})
}
- console.log(allSearchReault.value, 444)
+ listLoading.value = false
+ }else{
listLoading.value = false
}
}
@@ -3019,7 +3036,7 @@
//鐢诲竷鎮诞鎿嶄綔
-let canvas = null
+let canvasBox: any = null
const floatingToolData = reactive({
activeToolData: '', //閫変腑宸ュ叿
activeBookmark: '', //閫変腑涔︾
@@ -3030,6 +3047,10 @@
//鐢诲竷
const canvasShow = ref(false)
+let textBox: any = null
+let activeElBox: any = null
+//鐧芥澘
+const whiteBoard = ref(false)
//鎴浘浜嬩欢
const nameRef = ref()
@@ -3056,10 +3077,17 @@
}
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
@@ -3087,18 +3115,53 @@
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
}
}
@@ -3106,31 +3169,32 @@
//閫変腑鐢荤瑪绮楃粏
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
}
//閫夋嫨鍥惧舰
@@ -3138,14 +3202,190 @@
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-鍙抽敭
+ // 鍦ㄧ敾甯冧笂鍙抽敭锛宼arget 涓� 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) => {
@@ -5082,7 +5322,7 @@
li > div {
// height: 50px;
- padding: 10px 36px;
+ padding: 10px 36px 10px 25px;
font-size: 16px;
display: flex;
align-items: center;
@@ -5457,11 +5697,22 @@
.wendabox {
width: 100%;
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,
@@ -5489,9 +5740,9 @@
right: 0px !important;
}
- .el-dialog__body {
- padding: 20px !important;
- }
+ // .el-dialog__body {
+ // padding: 20px !important;
+ // }
.el-dialog__footer {
padding: 10px 20px 20px !important;
--
Gitblit v1.9.1