From 8bb0a518dd4d9450370582c4d4ac3ae1dba1466b Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期五, 25 四月 2025 15:28:18 +0800
Subject: [PATCH] 资源
---
src/views/readerPages/webHome.vue | 559 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 448 insertions(+), 111 deletions(-)
diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue
index 0bb5ff2..f6b981a 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>
@@ -440,7 +440,11 @@
@click="goPlay(item)"
size="20"
class="icon hover"
- v-if="item.resourceType != '瑙嗛' && item.resourceType != '闊抽' && item.resourceType != '鍥剧墖'"
+ v-if="
+ item.resourceType != '瑙嗛' &&
+ item.resourceType != '闊抽' &&
+ item.resourceType != '鍥剧墖'
+ "
>
<View />
</el-icon>
@@ -645,6 +649,18 @@
<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>
<!-- 鐢荤瑪缁勪欢 -->
@@ -793,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">
@@ -1140,6 +1164,11 @@
</div>
</div>
+ <!-- 鐧芥澘 -->
+ <div v-if="whiteBoard" class="whiteBoardBox">
+ <whiteBoardBox @whiteBoardClose="whiteBoardClose"></whiteBoardBox>
+ </div>
+
<el-dialog
title="璧勬簮"
align-center
@@ -1153,16 +1182,11 @@
</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>
+ <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> -->
@@ -1276,7 +1300,7 @@
</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>
+ <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe>
</div>
</el-dialog>
<el-dialog title="鐢熻瘝鍗＄墖" align-center v-model="shengciVisble" width="800" class="myDialogs">
@@ -1295,12 +1319,7 @@
<wrongQuestion />
</div>
</el-dialog>
- <el-dialog
- title="鍏紡缂栬緫"
- align-center
- v-model="formulaDialog"
- class="myDialogs"
- >
+ <el-dialog title="鍏紡缂栬緫" align-center v-model="formulaDialog" class="myDialogs">
<div class="wendabox">
<formula />
</div>
@@ -1318,14 +1337,19 @@
<!-- <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 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'
const { toClipboard } = useClipboard()
+const { formatTime } = useFormatData()
const MG: any = inject('MG')
const toolClass = inject('toolClass')
//鑾峰彇璺敱鍣�
@@ -1338,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'
@@ -1436,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
@@ -1495,7 +1520,6 @@
window.qiankunState.initTestBook(localStorage.getItem('bookId') + '', tryPageCount.value)
}
}
-
})
// 瀹氫箟鐖跺眰鏂规硶
@@ -1585,7 +1609,6 @@
// if (window.qiankunState && window.qiankunState.getAnswers){
// window.qiankunState.getAnswers(localStorage.getItem(""))
// }
-
})
onBeforeUnmount(() => {
@@ -1636,8 +1659,9 @@
}
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.includes(res.datas[0].defaultSaleMethodId)) {
+ if (res.datas[0].purchasedSaleMethodIdList.indexOf(res.datas[0].defaultSaleMethodId) > -1) {
isBuy.value = true
} else {
isBuy.value = false
@@ -1716,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: '涔︾',
@@ -1735,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 = [
@@ -1808,6 +1833,11 @@
icon: fanqiezhong,
isShow: bookConfig.value.textbookComponents.indexOf('E4DC9777') > -1
}
+ // {
+ // name: '鐣寗闂归挓',
+ // icon: fanqiezhong,
+ // isShow: true
+ // }
]
floatingToolBox = [
{
@@ -1820,6 +1850,7 @@
icon: baiban,
name: '鐧芥澘',
isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1
+ // isShow: true
},
{
icon: biaozhu,
@@ -1899,9 +1930,9 @@
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)
+ window.qiankunState.gotoPage(chapter, start)
localStorage.removeItem('chapter')
localStorage.removeItem('startPage')
}
@@ -1909,7 +1940,6 @@
})
.catch(function (error) {
listLoading.value = false
-
})
}
const defaultProps = {
@@ -1981,11 +2011,11 @@
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)
}
}
@@ -2063,8 +2093,12 @@
if (resItem1.resourceType == classifySelectList.value[0].title) {
resourceDataList.value.push(resItem1)
}
- if(activeClassify.value == 'other'){
- if (resItem1.resourceType != '鍥剧墖' && resItem1.resourceType != '瑙嗛' && resItem1.resourceType != '闊抽') {
+ if (activeClassify.value == 'other') {
+ if (
+ resItem1.resourceType != '鍥剧墖' &&
+ resItem1.resourceType != '瑙嗛' &&
+ resItem1.resourceType != '闊抽'
+ ) {
resourceDataList.value.push(resItem1)
}
}
@@ -2142,8 +2176,12 @@
if (resItem1.resourceType == classifySelectList.value[0].title) {
resourceDataList.value.push(resItem1)
}
- if(activeClassify.value == 'other'){
- if (resItem1.resourceType != '鍥剧墖' && resItem1.resourceType != '瑙嗛' && resItem1.resourceType != '闊抽') {
+ if (activeClassify.value == 'other') {
+ if (
+ resItem1.resourceType != '鍥剧墖' &&
+ resItem1.resourceType != '瑙嗛' &&
+ resItem1.resourceType != '闊抽'
+ ) {
resourceDataList.value.push(resItem1)
}
}
@@ -2182,7 +2220,7 @@
const sceneUrl = ref()
const showData = ref()
const goPlay = (data, index) => {
- console.log(data.resourceType,123)
+ console.log(data.resourceType, 123)
resourType.value = data.resourceType
if (data.resourceType == '瑙嗛') {
if (data.md5) {
@@ -2200,12 +2238,19 @@
}
autoPlay()
} else if (data.resourceType == '妯″瀷') {
- console.log(data,222)
+ console.log(data, 222)
let file = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5
- console.log(file.exd,777)
+ 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'
+ 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
}
@@ -2215,38 +2260,37 @@
// } else if (data.resourcePath) {
// window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath)
// }
- }else if(data.resourceType == 'PPT' || data.resourceType == 'PDF'){
+ } 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 =
+ 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)
+ '/file/GetPdfPageImage?md5=' +
+ md5 +
+ '&index=' +
+ (i + 1) +
+ '&dpi=300'
+ dataList.push({
+ showSrc: src
+ })
}
- })
-
- }else {
+ 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.resourcePath) {
@@ -2258,7 +2302,7 @@
// testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
// }
}
-const goDownload =(data) =>{
+const goDownload = (data) => {
if (data.md5) {
window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5)
} else if (data.resourcePath) {
@@ -2405,8 +2449,12 @@
if (resItem1.resourceType == classifySelectList.value[0].title) {
resourceDataList.value.push(resItem1)
}
- if(activeClassify.value == 'other'){
- if (resItem1.resourceType != '鍥剧墖' && resItem1.resourceType != '瑙嗛' && resItem1.resourceType != '闊抽') {
+ if (activeClassify.value == 'other') {
+ if (
+ resItem1.resourceType != '鍥剧墖' &&
+ resItem1.resourceType != '瑙嗛' &&
+ resItem1.resourceType != '闊抽'
+ ) {
resourceDataList.value.push(resItem1)
}
}
@@ -2596,6 +2644,7 @@
const menuItemClick = (name) => {
searchText.value = ''
allSearchReault.value = []
+ listLoading.value = false
if (menuState.open && activeMenu.value == name) {
menuState.open = false
} else {
@@ -2776,12 +2825,12 @@
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) => {
@@ -2810,7 +2859,8 @@
}
})
}
- console.log(allSearchReault.value, 444)
+ listLoading.value = false
+ }else{
listLoading.value = false
}
}
@@ -2895,7 +2945,7 @@
break
}
}
-
+type pomodoroType = InstanceType<typeof Pomodoro>
const baiduVisible = ref(false)
const wendaVisible = ref(false)
const cidianVisible = ref(false)
@@ -2905,13 +2955,14 @@
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) {
@@ -2925,7 +2976,7 @@
siweiVisble.value = true
break
case '妯″瀷宸ュ叿':
- modelTool.value = true
+ modelTool.value = true
break
case '璇嶅吀':
cidianVisible.value = true
@@ -2936,6 +2987,8 @@
break
case '璁＄畻鍣�':
calculatorVisble.value = true
+ case '鐣寗闂归挓':
+ pomodoroRef.value.setDialogVisable(true)
break
}
} else {
@@ -2984,7 +3037,7 @@
//鐢诲竷鎮诞鎿嶄綔
-let canvas = null
+let canvasBox: any = null
const floatingToolData = reactive({
activeToolData: '', //閫変腑宸ュ叿
activeBookmark: '', //閫変腑涔︾
@@ -2995,6 +3048,10 @@
//鐢诲竷
const canvasShow = ref(false)
+let textBox: any = null
+let activeElBox: any = null
+//鐧芥澘
+const whiteBoard = ref(false)
//鎴浘浜嬩欢
const nameRef = ref()
@@ -3021,10 +3078,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
@@ -3052,18 +3116,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
}
}
@@ -3071,31 +3170,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
}
//閫夋嫨鍥惧舰
@@ -3103,14 +3203,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) => {
@@ -4215,6 +4491,29 @@
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>
<style lang="less">
@@ -4965,6 +5264,33 @@
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;
+ }
+ }
+ }
}
}
@@ -4997,7 +5323,7 @@
li > div {
// height: 50px;
- padding: 10px 36px;
+ padding: 10px 36px 10px 25px;
font-size: 16px;
display: flex;
align-items: center;
@@ -5372,11 +5698,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,
@@ -5404,9 +5741,9 @@
right: 0px !important;
}
- .el-dialog__body {
- padding: 20px !important;
- }
+ // .el-dialog__body {
+ // padding: 20px !important;
+ // }
.el-dialog__footer {
padding: 10px 20px 20px !important;
@@ -5475,14 +5812,14 @@
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;
- }
+ 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 {
@@ -5500,7 +5837,7 @@
left: 50px;
}
.iframe-box {
- width:100%;
+ width: 100%;
height: 800px;
}
</style>
--
Gitblit v1.9.1