Explorar o código

部分功能修改

JutarryWu hai 4 días
pai
achega
26a2616b41

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "康复信息智能管理系统",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "private": true,
   "type": "module",
   "scripts": {

+ 13 - 0
src/utils/index.ts

@@ -308,3 +308,16 @@ export function isJSON(str: string) {
     return false
   }
 }
+
+/**
+ * 批量删除 localStorage 中具有指定前缀的缓存项
+ * @param prefix 前缀字符串
+ */
+export function clearLocalStorageByPrefix(prefix: string): void {
+  const keys = Object.keys(localStorage)
+  keys.forEach((key) => {
+    if (key.startsWith(prefix)) {
+      localStorage.removeItem(key)
+    }
+  })
+}

+ 97 - 7
src/views/tester/components/RehabilitationEvaluation/CognitiveAbilityTask/CognitiveAbilityTaskDrawClock/index.vue

@@ -8,9 +8,10 @@
     </div>
     <div
       v-else
-      class="absolute top-[50%] left-[50%] translate-[-50%] w-[1100px] h-[640px] rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
+      class="absolute top-[50%] left-[50%] translate-[-50%] p-x-120px p-y-100px rounded-[8px] bg-[#ffffffff] shadow-lg flex flex-row items-center justify-around"
     >
       <canvas
+        id="drawingCanvas"
         ref="paintCanvas"
         width="560"
         height="480"
@@ -18,10 +19,12 @@
         @mousedown="startDrawing"
         @mousemove="draw"
         @mouseup="stopDrawing"
+        @touchstart="startDrawing"
+        @touchmove="draw"
       ></canvas>
 
       <div v-if="isMainWin" class="absolute wh-full top-0 left-0 z-3000"></div>
-      <div v-else>
+      <div v-else class="ml-96px">
         <div class="font-600 text-[20px] mb-[12px]">画笔颜色:</div>
         <div class="w-[270px] flex flex-row flex-wrap">
           <div
@@ -200,8 +203,7 @@ import EvaluationSTRecordInfoAPI from '@/api/tester/evaluation/stRecord'
 import { useUserStore } from '@/store'
 
 import { useSocket } from '@/utils/websoket'
-import { isJSON } from '@/utils'
-const { socket, wsSend, wsOn, wsOff } = useSocket()
+import { useThrottleFn } from '@vueuse/core'
 
 const isMainWin = ref(false)
 
@@ -246,6 +248,10 @@ const preDrawAry = ref<ImageData[]>([])
 const middleAry = ref<ImageData[]>([])
 const nextDrawAry = ref<ImageData[]>([])
 
+/**
+ * 鼠标按下事件
+ * @param event
+ */
 const startDrawing = (event: MouseEvent) => {
   if (!isPainting && ctx) {
     isPainting = true
@@ -260,6 +266,30 @@ const startDrawing = (event: MouseEvent) => {
   }
 }
 
+/**
+ * 触摸开始事件
+ * @param e
+ */
+function touchStartDrawing(e: MouseEvent | TouchEvent) {
+  isPainting = true
+  ;[lastX, lastY] = [
+    'touches' in e
+      ? [(e as TouchEvent).touches[0].clientX, (e as TouchEvent).touches[0].clientY]
+      : [(e as MouseEvent).clientX - 360, (e as MouseEvent).clientY - 140]
+  ]
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+
+  // 当前绘图表面状态
+  const preData = ctx.getImageData(0, 0, 600, 420)
+  // 当前绘图表面进栈
+  preDrawAry.value.push(preData)
+}
+
+/**
+ * 鼠标移动事件
+ * @param event
+ */
 const draw = (event: MouseEvent) => {
   if (isPainting && ctx) {
     ctx.lineTo(event.offsetX, event.offsetY)
@@ -269,6 +299,33 @@ const draw = (event: MouseEvent) => {
   }
 }
 
+/**
+ * 触摸移动事件
+ * @param e
+ */
+function touchDraw(e: MouseEvent | TouchEvent) {
+  if (!isPainting) return // 防止在未按下鼠标或触摸时绘制
+  e.preventDefault()
+
+  let x: number, y: number
+  if ('touches' in e) {
+    x = (e as TouchEvent).touches[0].clientX - 360
+    y = (e as TouchEvent).touches[0].clientY - 140
+  } else {
+    x = (e as MouseEvent).clientX
+    y = (e as MouseEvent).clientY
+  }
+
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(x, y)
+  ctx.stroke()
+  ;[lastX, lastY] = [x, y]
+  canvasToBase64ToStorage(0)
+}
+
+/**
+ * 鼠标抬起事件
+ */
 const stopDrawing = () => {
   const preData = ctx?.getImageData(0, 0, 600, 420)
   if (!nextDrawAry.value.length) {
@@ -284,6 +341,24 @@ const stopDrawing = () => {
   isPainting = false
 }
 
+/**
+ * 触摸抬起事件
+ */
+function touchStopDrawing() {
+  const preData = ctx?.getImageData(0, 0, 600, 420)
+  if (!nextDrawAry.value.length) {
+    // 当前绘图表面进栈
+    middleAry.value.push(preData!)
+  } else {
+    middleAry.value = []
+    middleAry.value = middleAry.value.concat(preDrawAry.value)
+    middleAry.value.push(preData!)
+    nextDrawAry.value = []
+  }
+
+  isPainting = false
+}
+
 const initCanvas = () => {
   if (paintCanvas.value) {
     ctx = paintCanvas.value.getContext('2d')
@@ -292,6 +367,21 @@ const initCanvas = () => {
       ctx.lineWidth = 5
       ctx.lineCap = 'round'
     }
+
+    const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement
+    // 触摸事件
+    canvas.addEventListener('touchstart', touchStartDrawing)
+    canvas.addEventListener('touchmove', touchDraw)
+    canvas.addEventListener('touchend', touchStopDrawing)
+
+    // 确保取消默认行为
+    canvas.addEventListener(
+      'touchmove',
+      (e) => {
+        e.preventDefault()
+      },
+      { passive: false }
+    ) // 确保 passive 选项为 false
   }
 }
 
@@ -328,7 +418,7 @@ function controlCanvas(action: string) {
 
 const getImage = () => {
   imgUrl.value = paintCanvas.value?.toDataURL('image/png') ?? ''
-  dialogVisible.value = true
+  // dialogVisible.value = true
 
   localStorage.setItem('tow-win-draw-clock-result-arr-reset', 'reset')
   localStorage.setItem('tow-win-draw-clock-show-dialog', 'YES')
@@ -353,7 +443,7 @@ watch(
 /**
  * 提交操作
  */
-const handleSubmit = () => {
+const handleSubmit = useThrottleFn(() => {
   if (
     radios.value[0] == null ||
     radios.value[1] == null ||
@@ -417,7 +507,7 @@ const handleSubmit = () => {
       ElMessage.error('提交失败!')
       loading.value = false
     })
-}
+})
 
 const countDownEnd = () => {
   countDownBegin.value = false

+ 8 - 1
src/views/tester/evaluation/rehabilitation/index.vue

@@ -78,6 +78,7 @@
  */
 import EvaluationLogAPI, { EvaluationLogQuery, EvaluationLogVO } from '@/api/tester/evaluation/log'
 import { useUserStore } from '@/store'
+import { clearLocalStorageByPrefix } from '@/utils'
 
 defineOptions({
   name: 'EvaluationLog',
@@ -154,12 +155,18 @@ const pageHeaderGoBack = () => {
 }
 
 onMounted(() => {
+  if (!window.location.href.includes('win=main')) {
+    // 清除本地关于双屏的存储,防止双屏误操作影响后续操作
+    clearLocalStorageByPrefix('tow-win-')
+  }
+
   queryParams.patId = userStore.user.id
   handleQuery()
 })
 
 onUnmounted(() => {
-  localStorage.removeItem('tow-win-show-is-main-win') // 移除主副窗口标识
+  // 清除本地关于双屏的存储,防止双屏误操作影响后续操作
+  clearLocalStorageByPrefix('tow-win-')
 })
 </script>