心电图模块 修改

src/views/ECG/ECGhtml.vue

@@ -2,9 +2,8 @@
   <div>
     <!-- <button @click="moveCanvas('left')">左边-左移</button>
        <button @click="moveCanvas('right')">左边-右移</button>-->
-     
+    <sb />
     <div class="container">
-          <BB>
       <div id="canvas-container">
         <canvas ref="leftCanvas" id="leftCanvas" width="21" height="600"></canvas>
         <canvas ref="bottomCanvas" id="bottomCanvas" width="1140" height="600"></canvas>
@@ -15,9 +14,8 @@
           height="600"
           @mousedown="handleMouseDown($event, 'L')"
         ></canvas>
-       
       </div>
-      </BB>
+
       <div id="canvas-container1">
         <canvas ref="rightCanvas" id="rightCanvas" width="21" height="600"></canvas>
         <canvas ref="bottomCanvas1" id="bottomCanvas1" width="1140" height="600"></canvas>
@@ -30,8 +28,42 @@
         ></canvas>
       </div>
     </div>
-    <el-slider v-model="sliderValue" :min="0" :max="50" :step="1" @input="handleSliderChange" />
+    <span class="myrtip"
+      >{{ '&nbsp;走速：' + convert(suduratio, 0) + 'mm/s ' }}
+      {{ '&nbsp;振幅：' + convert(lineratio, 1) + 'mm/mv ' }} {{ '&nbsp;报告模式：6X2' }}</span
+    >
+    <div @click="preventClick">
+      <el-slider
+        v-model="sliderValue"
+        :min="0"
+        :max="50"
+        :step="1"
+        @input="handleSliderChange"
+        :show-tooltip="false"
+      />
     </div>
+  </div>
+  <!--纠错功能-->
+  <el-dialog v-model="isdialog" title="导联纠错" width="600" @close="close">
+    <div>
+      <el-checkbox-group v-model="transfer" :min="0" :max="2" class="mycheckbox-group">
+        <el-checkbox
+          v-for="city in transferleads"
+          :key="city"
+          :label="city"
+          :value="city"
+          class="mycheckbox-item"
+          @change="checkboxchage"
+        >
+          {{ city }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div style="margin-top: 10px">
+      <el-button type="primary" @click="clickdl" :disabled="checkes">交换导联</el-button>
+      <el-button type="primary" @click="recovery()">恢复正常</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -44,7 +76,9 @@ import BB from './ECGBB.vue'
 //读取出来的json
 const text = ref()
 const sliderValue = ref(0) // 初始化滑块值
-
+//给父组件回传值
+const emits = defineEmits(['update:value'])
+const lineratio1 = ref(0.05) //画线的系数 振幅
 const previousValue = ref(0) // 记录上一个滑块值
 const swipeDirection = ref('') // 用于存储滑动方向
 // 响应式引用
@@ -59,6 +93,16 @@ const url = ref()
 const ctx = ref(null)
 const isVertical = ref(false) // 控制线条类型，true 为竖直，false 为水平
 const lastPoint = ref(null) // 用于存储上一个点的坐标
+const isdialog = ref(false) //用于开启纠错
+const transfer = ref() //纠错导联 值
+
+const checkes = ref(true) //控制导联交换按钮是否可用
+
+// 响应式数据
+const beatArray1 = ref([])
+const beatArray2 = ref([]) //备份数据
+let offset = 0
+const spacing = 20
 
 function handleMouseDown(event, type) {
   if (type === 'L') {
@@ -94,39 +138,63 @@ function calculateDistance(x1, y1, x2, y2) {
 function drawLineAndDistance(point1, point2) {
   //ctx.value.clearRect(0, 0, topCanvas.value.width, topCanvas.value.height); // 清除画布
 
+  //竖线
+  if (Math.abs(point2.x - point1.x) <= 20) {
+    point2.x = point1.x
+    lineTo(point1.x, point1.y, point2.x, point2.y,1)
+  } else if (Math.abs(point2.y - point1.y) <= 20) {//横
+    point2.y = point1.y
+    lineTo(point1.x, point1.y, point2.x, point2.y,0)
+  } else {
+    lastPoint.value = null
+  }
+}
+
+function lineTo(x, y, x1, y1, type) {
+
   // 绘制两个点
   ctx.value.fillStyle = 'black'
   ctx.value.beginPath()
-  ctx.value.arc(point1.x, point1.y, 1, 0, 2 * Math.PI)
+  ctx.value.arc(x, y, 1, 0, 2 * Math.PI)
   ctx.value.fill()
   ctx.value.beginPath()
-  ctx.value.arc(point2.x, point2.y, 1, 0, 2 * Math.PI)
+  ctx.value.arc(x1, y1, 1, 0, 2 * Math.PI)
   ctx.value.fill()
 
   // 绘制直线
   ctx.value.beginPath()
-  ctx.value.moveTo(point1.x, point1.y)
+  ctx.value.moveTo(x, y)
-  ctx.value.lineTo(point2.x, point2.y)
+  ctx.value.lineTo(x1, y1)
   ctx.value.strokeStyle = 'black'
   ctx.value.lineWidth = 1
   ctx.value.stroke()
 
   // 计算并绘制距离文本
-  const distance = calculateDistance(point1.x, point1.y, point2.x, point2.y)
+  const distance = calculateDistance(x, y, x1,y1)
+  const ms = (25.4 / 96) * (25 / 1000) * distance
   ctx.value.font = '11px Arial'
   ctx.value.fillStyle = 'black'
-  ctx.value.fillText(`距离: ${distance.toFixed(2)}px`, point1.x + 10, point1.y - 10)
+  if (type === 1) {
+    ctx.value.fillText(`距离: ${ms.toFixed(2)}ms`, x + 5, y +30)
+  } else {
+    ctx.value.fillText(`距离: ${ms.toFixed(2)}ms`, x + 10, y - 10)
+  }
+
 }
 
 /*鼠标绘制相关*/
 
 const handleSliderChange = (value) => {
+  // 计算当前值与上一次值之间的差值
+  const difference = value - previousValue.value
+  const swipeDifference = Math.abs(difference)
+  console.log('滑动差值' + swipeDifference)
   if (value > previousValue.value) {
     swipeDirection.value = '右滑' // 向右滑动
-    moveCanvas('left')
+    moveCanvas('left', swipeDifference)
   } else if (value < previousValue.value) {
     swipeDirection.value = '左滑' // 向左滑动
-    moveCanvas('right')
+    moveCanvas('right', swipeDifference)
   } else {
     swipeDirection.value = '未滑动' // 没有滑动
   }
@@ -136,7 +204,7 @@ const handleSliderChange = (value) => {
 
 //渲染组件后执行
 onMounted(async () => {
-  console.log('挂载完成' + infoParams.Isgrid)
+  console.log('挂载完成')
   // topCanvas.value = document.getElementById('topCanvas');
 })
 
@@ -164,6 +232,7 @@ nextTick(() => {
   }
   fetchData()
 })
+
 // 定义异步方法
 const fetchData = async () => {
   try {
@@ -200,25 +269,126 @@ const infoParams = defineProps({
   examId: String,
   Isgrid: Number,
   Ismeasure: Number,
-  Isfd: Boolean
+  Isfd: Boolean,
+  lineratio: Number,
+  suduratio: Number,
+  isrefresh: Boolean,
+  iscorrect: Boolean
 })
 
-// // 使用 watch 来监听 parentValue 的变化
-// watch(
-//   () => infoParams.Isgrid,
-//   (newValue, oldValue) => {
-//     console.log(`Isgrid 从 ${oldValue} 变化到 ${newValue}`)
-//   }
-// )
 // 监听多个值的变化
 watch(
-  [() => infoParams.Isgrid, () => infoParams.Ismeasure],
+  [
-  ([newIsGridValue, newAnotherValue], [oldIsGridView, oldAnotherValue]) => {
+    () => infoParams.Isgrid,
+    () => infoParams.Ismeasure,
+    () => infoParams.lineratio,
+    () => infoParams.suduratio,
+    () => infoParams.isrefresh,
+    () => infoParams.iscorrect
+  ],
+  (
+    [newIsGridValue, newAnotherValue, newlineratio, newsuduratio, newisrefresh, newiniscorrect],
+    [oldIsGridView, oldAnotherValue, oldlineratio, oldsuduratio, oldisrefresh, oldiscorrect]
+  ) => {
     // 检查 isGrid 是否发生变化
     if (newIsGridValue !== oldIsGridView) {
-      console.log(`isGrid 从 ${oldIsGridView} 变化到 ${newIsGridValue}`)
       // 值发送变化的时候 重新绘制 先清除画布
+      Repaint()
+    }
+    // 检查 anotherValue 是否发生变化
+    if (newAnotherValue !== oldAnotherValue) {
+      // 是否开启测量
+    }
+    //振幅
+    if (newlineratio !== oldlineratio) {
+      Repaint()
+    }
+    //走速
+    if (newsuduratio !== oldsuduratio) {
+      Repaint()
+    }
+    //刷新
+    if (newisrefresh !== oldisrefresh) {
+      console.log(newisrefresh)
+      Repaint()
+    }
+    //
+    if (newiniscorrect !== oldiscorrect) {
+      isdialog.value = newiniscorrect
+    }
+  }
+)
+//恢复导联
+function recovery() {
+  transfer.value = []
+  beatArray1.value = beatArray2.value.slice()
+  Repaint()
+}
 
+//交换导联按钮
+function checkboxchage() {
+  checkes.value = transfer.value.length === 2 ? false : true
+}
+//交换导联
+function clickdl() {
+  const one = transfer.value[0]
+  const two = transfer.value[1]
+  const oneindex = transferleads.indexOf(one)
+  const twoindex = transferleads.indexOf(two)
+  swapElements(oneindex, twoindex)
+  Repaint()
+}
+
+// 定义一个方法来交换数组中的两个元素
+const swapElements = (index1, index2) => {
+  // 检查索引是否有效
+  if (
+    index1 < 0 ||
+    index2 < 0 ||
+    index1 >= beatArray1.value.length ||
+    index2 >= beatArray1.value.length
+  ) {
+    console.log('索引超出数组范围')
+    return
+  }
+  // 交换元素
+  const temp = beatArray1.value[index1]
+  beatArray1.value[index1] = beatArray1.value[index2]
+  beatArray1.value[index2] = temp
+}
+
+//纠错
+function close() {
+  isdialog.value = false
+  transfer.value = []
+  emits('update:value', isdialog.value)
+}
+
+// 定义一个对象来存储命令值和对应的比例文本
+const lineratioMap = {
+  0.012: '2.5',
+  0.025: '5',
+  0.05: '10',
+  0.1: '20',
+  0.2: '40'
+}
+const suduratioMap = {
+  0.2: '5',
+  0.4: '10',
+  0.5: '12.5',
+  1: '25',
+  2: '50'
+}
+function convert(command, type) {
+  if (type === 0) {
+    return suduratioMap[command] || null
+  } else {
+    return lineratioMap[command] || null
+  }
+}
+
+// 刷新 重绘
+function Repaint() {
   eliminate(leftCanvas.value)
   eliminate(rightCanvas.value)
   eliminate(bottomCanvas.value)
@@ -226,18 +396,7 @@ watch(
   eliminate(topCanvas.value)
   eliminate(topCanvas1.value)
   Bottom()
-    }
+}
-    // 检查 anotherValue 是否发生变化
-    if (newAnotherValue !== oldAnotherValue) {
-      console.log(`anotherValue 从 ${oldAnotherValue} 变化到 ${newAnotherValue}`)
-      // 是否开启测量
-    }
-  }
-)
-// 响应式数据
-let beatArray1 = []
-let offset = 0
-const spacing = 20
 
 // 定义要处理的键
 const leads = [
@@ -255,6 +414,7 @@ const leads = [
   'LEAD_V6'
 ]
 
+const transferleads = ['I', 'II', 'III', 'avR', 'avL', 'avF', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6']
 // 每个心电波形名称数组
 const lead_name = ['I', 'II', 'III', 'aVR', 'aVL', 'aVF']
 
@@ -263,20 +423,24 @@ const rlead_name = ['V1', 'V2', 'V3', 'V4', 'V5', 'V6']
 //将读取到的文件转换成数组
 function handleFileChange() {
   const json = JSON.parse(text.value)
+
   leads.forEach((lead, index) => {
     const value = json[lead].trim()
     const commaSeparatedValue = value.replace(/\s+/g, ',')
     const numberArray = commaSeparatedValue.split(',').map(Number)
-    beatArray1.push(numberArray)
+    beatArray1.value.push(numberArray)
   })
+  beatArray2.value = beatArray1.value.slice()
 }
 
 // 定义移动画布的函数
-function moveCanvas(direction) {
+function moveCanvas(direction, count) {
+  const xoffset = count === 1 ? 1 : count
+
   if (direction === 'left') {
-    if (offset !== -20 * 40) offset -= spacing
+    if (offset !== -20 * 60) offset -= spacing * xoffset
   } else if (direction === 'right') {
-    if (offset !== 0) offset += spacing
+    if (offset !== 0) offset += spacing * xoffset
   }
 
   // if (direction === 'left') {
@@ -302,17 +466,17 @@ function drawBottomCanvas() {
   if (infoParams.Isgrid === 1) {
     lbackcanvas(leftCanvas.value)
     rbackcanvas(rightCanvas.value)
-    drawMultipleLines(bottomCanvas.value, beatArray1)
+    drawMultipleLines(bottomCanvas.value, beatArray1.value)
-    drawMultipleLines(bottomCanvas1.value, beatArray1)
+    drawMultipleLines(bottomCanvas1.value, beatArray1.value)
   }
-  begin(leftCanvas.value, beatArray1)
+  begin(leftCanvas.value, beatArray1.value)
-  beginr(rightCanvas.value, beatArray1)
+  beginr(rightCanvas.value, beatArray1.value)
 }
 
 // 绘制顶层画布的内容
 function drawTopCanvas() {
-  drawMultipleLinesl(topCanvas.value, beatArray1)
+  drawMultipleLinesl(topCanvas.value, beatArray1.value)
-  drawMultipleLinesr(topCanvas1.value, beatArray1)
+  drawMultipleLinesr(topCanvas1.value, beatArray1.value)
 }
 //定标电压的画布
 function lbackcanvas(c_canvas) {
@@ -483,11 +647,11 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   if (index <= 5) {
     if (beatArray.length > 0) {
       const firstX = 0
-      const firstY = 50 - beatArray[0] * 0.025 + offset
+      const firstY = 50 - beatArray[0] * infoParams.lineratio + offset
       ctx.moveTo(firstX, firstY)
       for (let i = 0; i < beatArray.length - 1; i++) {
-        const x2 = 0 + (i + 1) / 10
+        const x2 = (0 + (i + 1) / 10) * infoParams.suduratio
-        const y2 = 50 - beatArray[i + 1] * 0.025 + offset
+        const y2 = 50 - beatArray[i + 1] * infoParams.lineratio + offset
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
@@ -497,11 +661,11 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   if (index > 5) {
     if (beatArray.length > 0) {
       const firstX = 0
-      const firstY = 50 - beatArray[0] * 0.025 + offset
+      const firstY = 50 - beatArray[0] * infoParams.lineratio + offset
       ctx.moveTo(firstX, firstY)
       for (let i = 0; i < beatArray.length - 1; i++) {
-        const x2 = 0 + (i + 1) / 10
+        const x2 = (0 + (i + 1) / 10) * infoParams.suduratio
-        const y2 = 50 - beatArray[i + 1] * 0.025 + offset
+        const y2 = 50 - beatArray[i + 1] * infoParams.lineratio + offset
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
@@ -519,7 +683,7 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
-  height: 600px;
+  height: 100%;
   max-width: 3920px;
 }
 #canvas-container,
@@ -559,5 +723,20 @@ function drawLine1(c_canvas, beatArray, offset, index) {
 canvas {
   position: absolute;
 }
+.myrtip {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-right: 30px;
+}
+.mycheckbox-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mycheckbox-item {
+  margin-left: 5px;
+  margin-right: 30px; /* 根据需要调整间距 */
+  margin-bottom: 10px; /* 根据需要调整间距 */
+  width: 30px;
+}
 /* 添加其他样式 */
 </style>