修改心电模块

src/views/ECG/ECGBB.vue

@@ -1,116 +0,0 @@
-<template>
-  <div
-    class="container"
-    ref="container"
-    @mousemove="handleMouseMove"
-    @mouseleave="hideCursor"
-    @click="handleClick"
-  >
-    <canvas
-      ref="cursorCanvas"
-      class="cursor-canvas"
-      :style="cursorStyle"
-    ></canvas>
-    <slot></slot>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-
-const container = ref(null);
-const cursorCanvas = ref(null);
-const isCursorVisible = ref(false);
-const cursorSize = 50; // 圆形光标的大小
-const cursorStyle = reactive({
-  display: 'none',
-  position: 'absolute',
-  border: '1px solid #b72525',
-  borderRadius: '50%',
-});
-
-const cursorPosition = reactive({ x: 0, y: 0 });
-
-function handleMouseMove(event) {
-  if (!container.value) return;
-
-  const bounds = container.value.getBoundingClientRect();
-  const mouseX = event.clientX - bounds.left;
-  const mouseY = event.clientY - bounds.top;
-
-  cursorPosition.x = mouseX;
-  cursorPosition.y = mouseY;
-
-  cursorStyle.left = `${mouseX - cursorSize / 2}px`;
-  cursorStyle.top = `${mouseY - cursorSize / 2}px`;
-  cursorStyle.display = 'block'; // 显示圆形光标
-
-  isCursorVisible.value = true;
-}
-
-function hideCursor() {
-  cursorStyle.display = 'none';
-  isCursorVisible.value = false;
-}
-
-function handleClick(event) {
-  if (!isCursorVisible.value) return;
-
-  // 截图并转换为 Base64
-  const imageDataUrl = getImageData(cursorPosition.x, cursorPosition.y, cursorSize);
-  console.log(imageDataUrl);
-}
-
-function getImageData(x, y, size) {
-  const tempCanvas = document.createElement('canvas');
-  tempCanvas.width = size;
-  tempCanvas.height = size;
-  const ctx = tempCanvas.getContext('2d');
-
-  // 遍历所有子元素，找到包含鼠标位置的 canvas，并截图
-  const elements = container.value.querySelectorAll('canvas');
-  for (const element of elements) {
-    const elemCtx = element.getContext('2d');
-    if (elemCtx) {
-      // 计算截取区域的坐标和尺寸
-      const elemBounds = element.getBoundingClientRect();
-      const elemX = x - elemBounds.left + window.scrollX;
-      const elemY = y - elemBounds.top + window.scrollY;
-
-      // 将图像区域绘制到临时 canvas 上
-      ctx.drawImage(
-        element,
-        elemX,
-        elemY,
-        size,
-        size,
-        0,
-        0,
-        size,
-        size
-      );
-    }
-  }
-
-  return tempCanvas.toDataURL('image/png');
-}
-
-onMounted(() => {
-  cursorCanvas.value.width = cursorSize;
-  cursorCanvas.value.height = cursorSize;
-  cursorCanvas.value.getContext('2d').clearRect(0, 0, cursorSize, cursorSize);
-});
-</script>
-
-<style scoped>
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.cursor-canvas {
-  display: none;
-}
-</style>

src/views/ECG/ECGFD.vue

@@ -1,145 +0,0 @@
-<template>
-  <div
-    class="magnifier-container"
-    ref="magnifierContainer"
-    @mousemove="handleMouseMove"
-    @mouseleave="hideMagnifier"
-  >
-    <canvas
-      class="magnifier-lens"
-      v-show="isMagnifierVisible"
-      ref="magnifierCanvas"
-      :style="lensStyle"
-    ></canvas>
-    <slot></slot> <!-- 插槽用于放置需要显示图像的元素 -->
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-
-const magnifierContainer = ref(null);
-const magnifierCanvas = ref(null);
-const isMagnifierVisible = ref(false);
-const lensSize = 150; // 正方形区域的边长
-const magnification = ref(2); // 放大倍数
-
-const lensStyle = reactive({
-  width: `${lensSize}px`,
-  height: `${lensSize}px`,
-  position: 'absolute',
-  border: '1px solid #ca0707', // 正方形区域的边框
-  pointerEvents: 'none'
-});
-
-const magnifierCtx = ref(null); // 定义为响应式引用
-
-onMounted(() => {
-  magnifierCanvas.value.width = lensSize;
-  magnifierCanvas.value.height = lensSize;
-  magnifierCtx.value = magnifierCanvas.value.getContext('2d');
-});
-
-// function handleMouseMove(event) {
-//   isMagnifierVisible.value = true;
-//   const bounds = magnifierContainer.value.getBoundingClientRect();
-//   const mouseX = event.clientX - bounds.left;
-//   const mouseY = event.clientY - bounds.top;
-
-//   lensStyle.left = `${mouseX - lensSize / 2}px`;
-//   lensStyle.top = `${mouseY - lensSize / 2}px`;
-//   lensStyle.display = 'block'; // 显示正方形区域
-
-//   // 清除之前的画布内容
-//   magnifierCtx.value.clearRect(0, 0, lensSize, lensSize);
-
-//   // 获取鼠标下的图像区域
-//   const dx = mouseX - lensSize / 2;
-//   const dy = mouseY - lensSize / 2;
-//   const dw = lensSize / magnification.value; // 目标宽度
-//   const dh = lensSize / magnification.value; // 目标高度
-
-//   // 将图像区域绘制到放大镜画布上
-//   magnifierCtx.value.drawImage(
-//     magnifierCanvas.value,
-//     dx,
-//     dy,
-//     dw,
-//     dh,
-//     0,
-//     0,
-//     lensSize,
-//     lensSize
-//   );
-//  const imageDataUrl = magnifierCanvas.value.toDataURL('image/png');
-//   console.log( imageDataUrl)
-// }
-
-function handleMouseMove(event) {
-  isMagnifierVisible.value = true;
-  const bounds = magnifierContainer.value.getBoundingClientRect();
-  const mouseX = event.clientX - bounds.left;
-  const mouseY = event.clientY - bounds.top;
-
-  lensStyle.left = `${mouseX - lensSize / 2}px`;
-  lensStyle.top = `${mouseY - lensSize / 2}px`;
-  lensStyle.display = 'block'; // 显示正方形区域
-
-  // 清除之前的画布内容
-  magnifierCtx.value.clearRect(0, 0, lensSize, lensSize);
-
-  // 遍历所有子元素，找到包含鼠标位置的元素，并截图
-  const elements = magnifierContainer.value.querySelectorAll('canvas, img');
-  for (const element of elements) {
-    const elemCtx = element.getContext ? element.getContext('2d') : null;
-    if (elemCtx && element.contains(event.target)) {
-      // 计算截取区域的坐标和尺寸，考虑放大倍数
-      const magnificationFactor = 2; // 放大倍数，可以根据需要调整
-      const sx = Math.max(0, mouseX - lensSize / 2) * magnificationFactor;
-      const sy = Math.max(0, mouseY - lensSize / 2) * magnificationFactor;
-      const sw = lensSize * magnificationFactor;
-      const sh = lensSize * magnificationFactor;
-
-      // 确保截取区域不会超出元素的边界
-      const scaledWidth = Math.min(sw, element.width);
-      const scaledHeight = Math.min(sh, element.height);
-
-      // 将图像区域绘制到放大镜画布上
-      magnifierCtx.value.drawImage(
-        element,
-        sx,
-        sy,
-        scaledWidth,
-        scaledHeight,
-        0,
-        0,
-        lensSize,
-        lensSize
-      );
-
-      // 将放大镜画布的内容转换为 base64
-      const imageDataUrl = magnifierCanvas.value.toDataURL('image/png');
-     // console.log(imageDataUrl);
-      break; // 找到正确的元素后退出循环
-    }
-  }
-}
-
-function hideMagnifier() {
-  isMagnifierVisible.value = false;
-  lensStyle.display = 'none'; // 隐藏正方形区域
-}
-</script>
-
-<style scoped>
-.magnifier-container {
-  position: relative;
-  overflow: hidden; /* 防止正方形区域超出容器 */
-}
-
-.magnifier-lens {
- 
-  z-index: 2000;
-}
-
-</style>

src/views/ECG/ECGForm.vue

@@ -8,14 +8,13 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :destroy-on-close="true"
-   
   >
     <div class="mycontainer">
       <div class="myleft-box">
         <el-container>
           <!--头部 患者信息-->
-          <el-header style="background-color: rgb(0, 157, 224); height: 40px">
+          <el-header style="background-color: rgb(79, 138, 240); height: 40px">
-            <div style="font-size: 20px; color: aliceblue">
+            <div style="font-size: 20px; color: aliceblue; margin-top: 5px">
               <span>{{ rowinfo.pname }}</span>
               <span style="margin-left: 10px"> {{ rowinfo.gender }}</span>
               <span style="margin-left: 10px"> {{ age + '岁' }}</span>
@@ -29,88 +28,168 @@
           <!--头部 功能按钮-->
           <el-header style="height: 40px; padding: 0px">
             <el-button-group class="ml-4" style="margin-top: 4px; margin-left: 0px">
-              <el-button type="primary" :icon="Edit">采集</el-button>
+              <el-button type="primary" plain
-              <el-button type="primary" :icon="Edit">分享</el-button>
+                ><el-icon><Filter /></el-icon> 采集</el-button
-              <el-button type="primary" :icon="Edit">重采</el-button>
+              >
-              <el-button type="primary" :icon="Edit">提交诊断</el-button>
+              <el-button type="primary" plain :icon="Share">分享</el-button>
-              <el-button type="primary" :icon="Edit">打印</el-button>
+              <el-button type="primary" plain>
+                <el-icon><RefreshLeft /></el-icon> 重采</el-button
+              >
+              <el-button
+                type="primary"
+                plain
+                :icon="Edit"
+                @click="getuporghiorgid(Primarykey, orgid)"
+                >申请诊断</el-button
+              >
+              <el-button type="primary" plain
+                ><el-icon><Printer /></el-icon>打印</el-button
+              >
             </el-button-group>
           </el-header>
           <el-container>
             <!--左侧 心电图区域-->
-            <el-aside width="97%" style="height: 750px">
+            <el-aside width="96%" style="height: 81vh">
               <el-tabs type="border-card" style="height: 99%">
                 <el-tab-pane :label="snapshotTime">
                   <!--心电图-->
-                  <ECGhtml v-if="isChildVisible" :jsonurl="queryParams.ecgJsonDataFilePath" :-isgrid=Isgrid :-ismeasure=Ismeasure :-isfd="IsFD"/>
+                  <ECGhtml
+                    v-if="isChildVisible"
+                    :jsonurl="queryParams.ecgJsonDataFilePath"
+                    :-isgrid="Isgrid"
+                    :-ismeasure="Ismeasure"
+                    :-isfd="IsFD"
+                    :lineratio="lineratio"
+                    :suduratio="suduratio"
+                    :isrefresh="isrefresh"
+                    :iscorrect="correct"
+                    @update:value="handleUpdate"
+                  />
                 </el-tab-pane>
               </el-tabs>
             </el-aside>
             <!--右侧 功能按钮-->
             <el-main style="padding: 1px">
-              <div style="margin-top: 30px; display: flex; flex-direction: column">
+              <div
+                style="margin-top: 30px; display: flex; flex-direction: column; align-items: center"
+              >
+                <el-dropdown placement="bottom" trigger="click" @command="handlezsCommand">
                   <el-button
                     style="width: 30px; height: 30px; margin-bottom: 10px"
                     type="primary"
-                  :icon="Edit"
+                    plain
-                />
+                  >
+                    <el-icon><Odometer /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="0.2">5mm/s</el-dropdown-item>
+                      <el-dropdown-item command="0.4">10mm/s</el-dropdown-item>
+                      <el-dropdown-item command="0.5">12.5mm/s</el-dropdown-item>
+                      <el-dropdown-item command="1">25mm/s</el-dropdown-item>
+                      <el-dropdown-item command="2">50mm/s</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
                 <span style="font-size: 15px; margin-bottom: 10px">走速</span>
+
+                <el-dropdown placement="bottom" trigger="click" @command="handleCommand">
                   <el-button
                     style="width: 30px; height: 30px; margin-bottom: 10px"
                     type="primary"
-                  :icon="Edit"
+                    plain
-                />
+                  >
+                    <el-icon><Histogram /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="0.012">2.5mm/mv</el-dropdown-item>
+                      <el-dropdown-item command="0.025">5mm/mv</el-dropdown-item>
+                      <el-dropdown-item command="0.05">10mm/mv</el-dropdown-item>
+                      <el-dropdown-item command="0.1">20mm/mv</el-dropdown-item>
+                      <el-dropdown-item command="0.2">40mm/mv</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
                 <span style="font-size: 15px; margin-bottom: 10px">振幅</span>
 
                 <el-button
                   style="width: 30px; height: 30px; margin-bottom: 10px"
                   type="primary"
-                  :icon="Edit"
+                  plain
                   @click="measure()"
-                />
+                >
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
                 <span style="font-size: 15px; margin-bottom: 10px">测量</span>
 
-                <el-button
+                <!-- <el-button
                   style="width: 30px; height: 30px; margin-bottom: 10px"
                   type="primary"
-                  :icon="Edit"
+                  plain
-                />
+                  @click="FD()"
-                <span style="font-size: 15px; margin-bottom: 10px">放大</span>
+                >
+                  <el-icon><ZoomIn /></el-icon>
+                </el-button>
+                <span style="font-size: 15px; margin-bottom: 10px">放大</span> -->
 
                 <el-button
                   style="width: 30px; height: 30px; margin-bottom: 10px"
                   type="primary"
-                  :icon="Edit"
+                  plain
-                  @click="FD()"
+                  @click="iscorrect()"
-                />
+                >
+                  <el-icon><Switch /></el-icon>
+                </el-button>
                 <span style="font-size: 15px; margin-bottom: 10px">纠错</span>
 
                 <el-button
                   style="width: 30px; height: 30px; margin-bottom: 10px"
                   type="primary"
-                  :icon="Edit"
+                  plain
                   @click="Isgriddisplay()"
-                />
+                >
+                  <el-icon><Grid /></el-icon>
+                </el-button>
                 <span style="font-size: 15px; margin-bottom: 10px">网格</span>
+
+                <el-button
+                  style="width: 30px; height: 30px; margin-bottom: 10px"
+                  type="primary"
+                  plain
+                  @click="Refresh"
+                >
+                  <el-icon><RefreshRight /></el-icon>
+                </el-button>
+                <span style="font-size: 15px; margin-bottom: 10px">刷新</span>
               </div>
             </el-main>
           </el-container>
         </el-container>
       </div>
       <div class="myright-box">
-        <el-form :model="queryParams" label-width="auto" style="max-width: 600px; margin-top: 10px">
+        <el-form
+          :model="queryParams"
+          label-width="auto"
+          id="elform"
+          style="max-width: 600px; margin-top: 10px; margin-left: 10px; height: 89vh"
+        >
           <!-- 第一行 -->
-          <el-row :gutter="24">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="心率">
-                <el-input v-model="queryParams.hr" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.hr" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>bpm</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="P电轴">
-                <el-input v-model="queryParams.paxle" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.paxle"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>°</template>
                 </el-input>
               </el-form-item>
@@ -118,17 +197,25 @@
           </el-row>
 
           <!-- 第二行 -->
-          <el-row :gutter="20">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="QRS电轴">
-                <el-input v-model="queryParams.qrsAxle" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.qrsAxle"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>°</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
-              <el-form-item label="T电轴">
+              <el-form-item label="T电轴" s>
-                <el-input v-model="queryParams.taxle" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.taxle"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>°</template>
                 </el-input>
               </el-form-item>
@@ -136,17 +223,21 @@
           </el-row>
 
           <!-- 第三行 -->
-          <el-row :gutter="20">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="P波时限">
-                <el-input v-model="queryParams.ptimeLimit" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.ptimeLimit"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>ms</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="PR间期">
-                <el-input v-model="queryParams.pr" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.pr" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>ms</template>
                 </el-input>
               </el-form-item>
@@ -154,17 +245,21 @@
           </el-row>
 
           <!-- 第四行 -->
-          <el-row :gutter="20">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="QRS时限">
-                <el-input v-model="queryParams.qrsTimeLimit" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.qrsTimeLimit"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>ms</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="QT间期">
-                <el-input v-model="queryParams.qt" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.qt" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>ms</template>
                 </el-input>
               </el-form-item>
@@ -172,17 +267,17 @@
           </el-row>
 
           <!-- 第五行 -->
-          <el-row :gutter="20">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="QTc">
-                <el-input v-model="queryParams.qtc" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.qtc" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>ms</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="RV5">
-                <el-input v-model="queryParams.rv5" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.rv5" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>mV</template>
                 </el-input>
               </el-form-item>
@@ -190,89 +285,139 @@
           </el-row>
 
           <!-- 第六行 -->
-          <el-row :gutter="20">
+          <el-row :gutter="24" style="margin-right: 1px; height: 35px">
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="SV1">
-                <el-input v-model="queryParams.sv1" suffix-icon="el-icon-date">
+                <el-input v-model="queryParams.sv1" suffix-icon="el-icon-date" style="width: 150px">
                   <template #append>mV</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="12" style="padding: 1px">
               <el-form-item label="RV5+SV1">
-                <el-input v-model="queryParams.rv5Sv1" suffix-icon="el-icon-date">
+                <el-input
+                  v-model="queryParams.rv5Sv1"
+                  suffix-icon="el-icon-date"
+                  style="width: 150px"
+                >
                   <template #append>mV</template>
                 </el-input>
               </el-form-item>
             </el-col>
           </el-row>
-          <el-tag type="info" style="font-size: 16px; width: 100%">心电事件快照</el-tag>
+          <el-tag type="info" style="font-size: 16px; width: 100%;color: black;">心电事件快照</el-tag>
           <el-input
             v-model="snapshotTime"
             style="width: 100%"
-            :rows="3"
+            :rows="4"
             type="textarea"
             placeholder=""
           />
-          <el-tag type="info" style="font-size: 16px; width: 100%">智能词库</el-tag>
+          <el-tag type="info" style="font-size: 16px; width: 100%;color: black;">智能词库</el-tag>
           <el-input
             v-model="queryParams.autoDiagResult"
             style="width: 100%"
-            :rows="3"
-            type="textarea"
-            placeholder="Please input"
-          />
-          <el-tag type="info" style="font-size: 16px; width: 100%">医生诊断结论</el-tag>
-          <el-input
-            v-model="queryParams.doctorDiagResult"
-            style="width: 100%"
             :rows="4"
             type="textarea"
-            placeholder="Please input"
+            placeholder=""
-            ref="inputRef"
           />
+          <el-tag type="info" style="font-size: 16px; width: 100%;color: black;"
+            >医生诊断结论 <el-button @click="zdmodle" type="primary" text>诊断模版</el-button>
+          </el-tag>
+          <el-input
+            class="your-component"
+            v-model="queryParams.doctorDiagResult"
+            style="width: 100%"
+            type="textarea"
+            placeholder=""
+            ref="inputRef"
+            :rows="eltextrow"
+          />
+          <div class="mybtnsty">
             <div>
-            <el-button class="mybutwidth" type="success" @click="insertValue('I')">I</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('I')">I</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('II')">II</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('II')">II</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('III')">III</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('III')"
-            <el-button class="mybutwidth" type="success" @click="insertValue('aVR')">aVR</el-button>
+                >III</el-button
-            <el-button class="mybutwidth" type="success" @click="insertValue('aVL')">aVL</el-button>
+              >
-            <el-button class="mybutwidth" type="success" @click="insertValue('aVF')">aVF</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('aVR')"
+                >aVR</el-button
+              >
+              <el-button class="mybutwidth" type="warning" @click="insertValue('aVL')"
+                >aVL</el-button
+              >
+              <el-button class="mybutwidth" type="warning" @click="insertValue('aVF')"
+                >aVF</el-button
+              >
             </div>
             <div>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V3R')">V3R</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V3R')"
-            <el-button class="mybutwidth" type="success" @click="insertValue('V4R')">V4R</el-button>
+                >V3R</el-button
-            <el-button class="mybutwidth" type="success" @click="insertValue('V5R')">V5R</el-button>
+              >
-            <el-button class="mybutwidth" type="success" @click="insertValue('V1')">V1</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V4R')"
-            <el-button class="mybutwidth" type="success" @click="insertValue('V2')">V2</el-button>
+                >V4R</el-button
-            <el-button class="mybutwidth" type="success" @click="insertValue('V3')">V3</el-button>
+              >
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V5R')"
+                >V5R</el-button
+              >
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V1')">V1</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V2')">V2</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V3')">V3</el-button>
             </div>
             <div>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V4')">V4</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V4')">V4</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V5')">V5</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V5')">V5</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V6')">V6</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V6')">V6</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V7')">V7</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V7')">V7</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V8')">V8</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V8')">V8</el-button>
-            <el-button class="mybutwidth" type="success" @click="insertValue('V9')">V9</el-button>
+              <el-button class="mybutwidth" type="warning" @click="insertValue('V9')">V9</el-button>
+            </div>
           </div>
           <div class="mycenter-button">
-            <el-button style="width: 200px" type="primary" plain @click="save">保存</el-button>
+            <el-button
+              style="width: 200px"
+              type="primary"
+              @click="getuporghiorgid(Primarykey, orgid)"
+              >申请诊断</el-button
+            >
+            <el-button style="width: 200px" type="primary" @click="save">保存</el-button>
           </div>
         </el-form>
       </div>
     </div>
   </el-dialog>
   <!-- </div> -->
+  <!--抽屉 用于展示诊断模版-->
+  <el-drawer v-model="drawer" :with-header="false" :modal="true" size="20%">
+    <span>诊断数据模版</span>
+    <el-tree
+      style="padding-top: 15px; padding-bottom: 20px; min-width: 195px; font-size: 20px"
+      class="treeStyle"
+      :check-on-click-node="true"
+      :highlight-current="true"
+      :default-expand-all="true"
+      :data="treeData"
+      :props="treeDefaultProps"
+      node-key="id"
+      :show-checkbox="false"
+      :check-strictly="true"
+      @check="handleTreeNodeClick"
+      ref="selectTree"
+      :expand-on-click-node="false"
+    />
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue'
+import { ArrowLeft, ArrowRight, Delete, Edit, Share, Check } from '@element-plus/icons-vue'
 import ECGhtml from '@/views/ECG/ECGhtml.vue'
 import { EcganalysisparasApi, EcganalysisparasVO } from '@/api/tblist/ecganalysisparas'
 import { dateFormatter, beginOfDay } from '@/utils/formatTime'
 import { formatDate, getCurrentLocalDateTime } from '@/utils/formatTime'
 import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
+import { ultrasoniccomApi, updateexamineimageVO } from '@/api/ultrasoniccom'
+import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
 
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -280,6 +425,8 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const id = ref() //患者ID
+const orgid = ref() //机构编码
+const Primarykey = ref() //主键ID
 const rowinfo = ref() //当前患者数据行
 const snapshotTime = ref() //心电事件快照事件
 // 定义一个响应式变量来控制子组件的显示
@@ -287,26 +434,58 @@ const isChildVisible = ref(false)
 const inputRef = ref() // 用于获取el-input的DOM引用
 const saveFormVO = ref<EcganalysisparasVO>({} as EcganalysisparasVO)
 const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
-const age = ref()//年龄
+const age = ref() //年龄
-const Isgrid=ref(1)//是否显示网格 1显示  0不显示
+const Isgrid = ref(1) //是否显示网格 1显示  0不显示
-const Ismeasure=ref(0)//是否开启测量 1开启 0 不开启
+const Ismeasure = ref(0) //是否开启测量 1开启 0 不开启
-const IsFD=ref(false)//是否开启放大 
+const IsFD = ref(false) //是否开启放大
+const lineratio = ref(0.05) //画线的系数 振幅
+const suduratio = ref(1) //画线的系数 走速
+const drawer = ref(false) //是否显示抽屉
+const diagnosemodel = ref() //存放诊断模版
+const isrefresh = ref(false) //是否刷新
+const correct = ref(false) //纠错功能
+const eltextrow = ref(4) //诊断内容占据的行
+
+// 树配置项
+const treeDefaultProps = {
+  children: 'children',
+  label: 'tempname'
+}
+// 通用树数据
+const treeData = ref([])
 
 /** 打开弹窗 */
 const open = async (row: any) => {
   dialogVisible.value = true
   dialogTitle.value = '心电分析'
   id.value = row.regId
+  Primarykey.value = row.id
+  orgid.value = row.orgId
   rowinfo.value = row
   const data = await EcganalysisparasApi.getexamIDdata('MZCF0191729074962197_44')
   queryParams.value = data
-  console.log(row)
   snapshotTime.value = formattedDate(queryParams.value.snapshotTime)
   getlogininfo()
   calculateAge(row.birthday)
-  Isgrid.value=1// 没次打开都是显示的 只有点击网格才会变化
+  Isgrid.value = 1 // 没次打开都是显示的 只有点击网格才会变化
   isChildVisible.value = true
+  nextTick(() => {
+    /* 计算右侧诊断*/
+    const canvasContainer = document.getElementById('elform')
+    if (canvasContainer) {
+      let sl = 300
+      const heightInPixels = canvasContainer.offsetHeight
+      if (heightInPixels > 1000) {
+        sl = -100
+      }
+      const divisor = 60 // 假设你想除以的数是2
+      const result = (heightInPixels - sl) / divisor
+      const integer = Math.round(result)
+      eltextrow.value = integer
+    }
+  })
 }
+
 // 返回的列表的数据
 const queryParams = ref({
   id: '',
@@ -344,9 +523,6 @@ const queryParams = ref({
 })
 //
 async function save() {
-  let timesta = new Date()
-  var localDateTime = new Date(timesta.getTime()).toISOString() // 转换为ISO格式的字符串
-
   saveFormVO.value.id = queryParams.value.id
   saveFormVO.value.hr = queryParams.value.hr
   saveFormVO.value.pAxle = queryParams.value.paxle
@@ -368,23 +544,95 @@ async function save() {
   // saveFormVO.value.departName=queryParams.value.departName
   const ret = await EcganalysisparasApi.SaveEcganalysisparas(saveFormVO.value)
   if (ret) {
-    message.success('保存成功')
+    message.alertSuccess('保存成功')
   }
 }
+
+//纠错窗体回传值
+const handleUpdate = (newValue) => {
+  correct.value = newValue
+}
+
+//纠错
+function iscorrect() {
+  correct.value = correct.value ? false : true
+}
+
+//刷新
+function Refresh() {
+  isrefresh.value = isrefresh.value ? false : true
+}
+
+/** 申请后更新上级机构字段*/
+const getuporghiorgid = async (id: number, orgId: string) => {
+  try {
+    if (rowinfo.value.highLevelOrgId) {
+      message.alertWarning('已提交申请')
+      return
+    }
+    await message.confirm('是否要进行申请？', '确认提示')
+    const data = await PatientexamlistApi.getuporghiid(id, orgId)
+    if (data == '申请成功') {
+      message.success('申请成功')
+    } else {
+      await message.info(data)
+    }
+  } catch {}
+}
+
+// 树节点选中事件
+const handleTreeNodeClick = async (data) => {
+  if (data.dataType === '0') {
+    const confirmed = await message.delConfirm('是否选择当前诊断', '确认')
+    if (confirmed) {
+      diagnosemodel.value = data.diagResults
+      insertValue(diagnosemodel.value)
+      drawer.value = false
+      console.log(diagnosemodel.value)
+    }
+  }
+}
+
+//诊断模版
+async function zdmodle() {
+  const dd = await ultrasoniccomApi.getreporttemplatelist('', '', '')
+  treeData.value = dd
+  drawer.value = drawer.value ? false : true
+}
+
+//获取振幅
+function handleCommand(value) {
+  lineratio.value = value
+}
+//走苏
+function handlezsCommand(value) {
+  suduratio.value = value
+}
+
 //是否显示网格
 function Isgriddisplay() {
-  const value=Isgrid.value === 1 ? 0 : 1;
+  const value = Isgrid.value === 1 ? 0 : 1
-  Isgrid.value=value
+  Isgrid.value = value
 }
 //是否开启 测量
 function measure() {
-  const value=Ismeasure.value === 1 ? 0 : 1;
+  const value = Ismeasure.value === 1 ? 0 : 1
-  Ismeasure.value=value
+  Ismeasure.value = value
+  if (value === 1) {
+    message.alertSuccess('开启测量')
+  } else {
+    message.alertSuccess('关闭测量')
+  }
 }
 //是否开启 放大
 function FD() {
-  const value=IsFD.value === false ? true : false;
+  const value = IsFD.value === false ? true : false
-  IsFD.value=value
+  IsFD.value = value
+  if (value) {
+    message.alertSuccess('开启放大')
+  } else {
+    message.alertSuccess('关闭放大')
+  }
 }
 
 //根据光标位置 插入值
@@ -445,17 +693,24 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 .mycontainer {
   display: flex;
   width: 100%;
+  height: 90vh;
 }
 
 .myleft-box {
   flex: 4; /* 左侧盒子占据一半空间 */
   border-style: solid; /* 设置边框样式为实线 */
-  border-width: 2px; /* 设置边框宽度为2像素 */
+  border-width: 1px; /* 设置边框宽度为2像素 */
-  border-color: #000000; /* 设置边框颜色为黑色 */
+  border-color: #cccccc; /* 设置边框颜色为黑色 */
+  height: 90vh;
 }
 
 .myright-box {
   flex: 1; /* 右侧盒子占据一半空间 */
+  border-style: solid solid solid; /* 上、右、下边框为实线 */
+  border-width: 1px; /* 设置边框宽度为1像素 */
+  border-color: #cccccc; /* 设置边框颜色为灰色 */
+  height: 90vh;
+  border-left-style: none; /* 移除左边边框 */
 }
 .mybutwidth {
   margin-left: 10px;
@@ -467,7 +722,14 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
   display: flex; /* 启用Flexbox布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
-  height: 100px; /* 根据需要设置容器高度 */
+  height: 30px; /* 根据需要设置容器高度 */
+  margin-top: 10px;
+}
+.mybtnsty {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 /*心电图区域样式*/
 

src/views/ECG/ECGSB.vue

@@ -1,164 +1,142 @@
 <template>
-  <div class="magnifying-glass">
+  <div class="magnifier" v-show="isShow">
-    <div class="source-box">
+    <!-- 只保留放大的内容 -->
     <div
-        class="zoom-box"
+      v-if="isZoomed"
+      class="magnifier-glass"
       :style="{
-          left: zoomPoint.x + 'px',
+        left: zoomedPosition.x + 'px',
-          top: zoomPoint.y + 'px'
+        top: zoomedPosition.y + 'px',
+        backgroundImage: screenshotUrl ? `url(${screenshotUrl})` : 'none',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '250px',
+        height: '250px'
       }"
-        v-show="isShow"
     ></div>
-      <canvas id="source-canvas"></canvas>
-    </div>
-    <canvas
-      id="look-canvas"
-      v-show="isShow"
-      :style="{ top: lookPoint.top + 'px', left: lookPoint.left + 'px' }"
-    ></canvas>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
-let canvas = null
+import html2canvas from 'html2canvas'
-let lookCanvas = null
+import ECGForm from './ECGForm.vue'
-// 桌布
+
-let zoomBox = null
+const isShow = ref(true)
-let canvasWidth = 50
+const isZoomed = ref(false)
-let canvasHeight = 50
+const screenshotUrl = ref('')
-// look-canvas 的展示位置设置
+const zoomedPosition = reactive({
-let lookPoint = reactive({
-  top: 0,
-  left: 50
-})
-// 原图的坐标
-let points = { x: 0, y: 0 }
-// 放大 图片的坐标
-let showPoint = { x: 0, y: 0 }
-// 桌布位置坐标
-let zoomPoint = reactive({
   x: 0,
   y: 0
 })
-// 鼠标 mousedow 窗口坐标点记录
+
-let startPoint = { x: 0, y: 0 }
+// 捕获指定区域的内容
-let isShow = ref(false)
+async function captureArea(x, y) {
-let image = null
+  try {
-// 放大倍数
+    const container = document.querySelector('.el-tab-pane')
-let multiple = 3
+    if (!container) return
-// 获取图片资源
+    const captureSize = 50
-async function getImage(url) {
+    const rect = container.getBoundingClientRect()
-  const response = await fetch(url)
+    const left = x - captureSize / 2
-  const blob = await response.blob()
+    const top = y - captureSize / 2
-  const image = await createImageBitmap(blob)
+
-  return image
+    const canvas = await html2canvas(document.body, {
+      useCORS: true,
+      allowTaint: true,
+      scale: 3, //截图清晰度
+      x: left - rect.left, // 相对于容器的坐标
+      y: top - rect.top,   // 相对于容器的坐标
+      width: captureSize,
+      height: captureSize,
+      backgroundColor: null
+    })
+
+    screenshotUrl.value = canvas.toDataURL('image/jpeg', 0.5)
+    isZoomed.value = true
+    zoomedPosition.x = x
+    zoomedPosition.y = y
+  } catch (error) {
+    console.error('截图失败:', error)
+  }
 }
-onMounted(async () => {
-  image = await getImage(
-    'https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422'
-  )
-  canvas = document.getElementById('source-canvas')
-  lookCanvas = document.getElementById('look-canvas')
-  zoomBox = document.querySelector('.zoom-box')
 
-  canvas.width = canvasWidth
+// 处理鼠标点击
-  canvas.height = canvasHeight
+function handleMouseDown(e) {
-  lookCanvas.width = canvasWidth
+  if (e.button === 0) {
-  lookCanvas.height = canvasHeight
+    // 左键点击
+    if (isZoomed.value) {
+      // 如果已经放大，则清除
+      isZoomed.value = false
+      screenshotUrl.value = ''
+    } else {
+      // 如果未放大，则进行截图
+      captureArea(e.clientX, e.clientY)
+    }
+  }
+}
 
-  let ctx = canvas.getContext('2d')
+// function handleKeyPress(e) {
-  ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
+//   if (e.key === 'Escape') {
+//     isShow.value = !isShow.value
+//     isZoomed.value = false
+//     screenshotUrl.value = ''
 
-  canvas.addEventListener('mousedown', canvasMousedown)
+//     if (isShow.value) {
-  window.addEventListener('mouseup', windowMouseUp)
+//       document.addEventListener('mousedown', handleMouseDown)
+//     } else {
+//       document.removeEventListener('mousedown', handleMouseDown)
+//     }
+//   }
+// }
+
+onMounted(() => {
+  // document.addEventListener('keydown', handleKeyPress)
 })
 
-function canvasMousedown(e) {
+onUnmounted(() => {
-  let { offsetX, offsetY, clientX, clientY } = e
+  //document.removeEventListener('keydown', handleKeyPress)
-  points = {
+  // document.removeEventListener('mousedown', handleMouseDown)
-    x: offsetX,
+})
-    y: offsetY
-  }
-  startPoint = {
-    x: clientX,
-    y: clientY
-  }
-  setShowPoint(offsetX, offsetY)
-  isShow.value = true
-  lookCanvasDraw(lookCanvas, image, canvasWidth, canvasHeight, multiple)
-  window.addEventListener('mousemove', windowMouseMove)
-}
 
-function windowMouseUp(e) {
+nextTick(() => {
-  isShow.value = false
-  window.removeEventListener('mousemove', windowMouseMove)
-}
 
-function windowMouseMove(e) {
-  let { clientX, clientY } = e
-  let x = points.x + clientX - startPoint.x
-  let y = points.y + clientY - startPoint.y
 
-  setShowPoint(x, y)
+});
-  lookCanvasDraw(lookCanvas, image, canvasWidth, canvasHeight, multiple)
+const infoParams = defineProps({
-}
+  Isfd: Boolean
-
+})
-function lookCanvasDraw(canvas, image, canvasWidth, canvasHeight, multiple = 2) {
+// 修改 watch，监听 props.isFD
-  let ctx = canvas.getContext('2d')
+watch([() => infoParams.Isfd], ([newfd], [oldds]) => {
-  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+  if (newfd !== oldds) {
-  ctx.drawImage(image, showPoint.x, showPoint.y, canvasWidth * multiple, canvasHeight * multiple)
+    console.log(newfd)
-}
+    if (newfd) {
-
+      document.addEventListener('mousedown', handleMouseDown)
-// 设置 放大镜查看 图片位置
+    } else {
-function setShowPoint(X, Y) {
+      document.removeEventListener('mousedown', handleMouseDown)
-  if (X > 500) {
-    X = 500
     }
-  if (X < 0) {
-    X = 0
   }
-  if (Y > 500) {
+})
-    Y = 500
-  }
-  if (Y < 0) {
-    Y = 0
-  }
-  //
-  showPoint = {
-    x: -X * multiple + canvasWidth / 2,
-    y: -Y * multiple + canvasHeight / 2
-  }
-  // 桌布桌布设置
-  zoomPoint.x = X
-  zoomPoint.y = Y
-}
 </script>
+
 <style scoped>
-.magnifying-glass {
+.magnifier {
-  position: relative;
+  position: fixed;
-  /* margin-left: 50px; */
+  top: 0;
-}
+  left: 0;
-.source-box {
+  width: 100%;
-  /* margin-top: 50px; */
+  height: 100%;
-  position: relative;
+  pointer-events: none;
-  width: 50px;
+  z-index: 9999;
-  height: 50px;
-}
-.zoom-box {
-  position: absolute;
-  width: 20%;
-  height: 20%;
-  background-color: rgba(255, 0, 0, 0.2);
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
 }
 
-#source-canvas,
+.magnifier-glass {
-#look-canvas {
+  position: fixed;
-  background-color: #eee;
+  border: 2px solid rgba(255, 0, 0, 0.5);
-}
+  border-radius: 50%;
-#look-canvas {
+  transform: translate(-50%, -50%);
-  position: absolute;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease-out;
 }
 </style>

src/views/ECG/ECGhtml.vue

@@ -2,28 +2,28 @@
   <div>
     <!-- <button @click="moveCanvas('left')">左边-左移</button>
        <button @click="moveCanvas('right')">左边-右移</button>-->
-    <sb />
+    <sb :-isfd="FD"/>
     <div class="container">
       <div id="canvas-container">
-        <canvas ref="leftCanvas" id="leftCanvas" width="21" height="600"></canvas>
+        <canvas ref="leftCanvas" id="leftCanvas" width="21" height="1140"></canvas>
-        <canvas ref="bottomCanvas" id="bottomCanvas" width="1140" height="600"></canvas>
+        <canvas ref="bottomCanvas" id="bottomCanvas" width="1140" height="1140"></canvas>
         <canvas
           ref="topCanvas"
           id="topCanvas"
           width="1140"
-          height="600"
+          height="1140"
           @mousedown="handleMouseDown($event, 'L')"
         ></canvas>
       </div>
 
       <div id="canvas-container1">
-        <canvas ref="rightCanvas" id="rightCanvas" width="21" height="600"></canvas>
+        <canvas ref="rightCanvas" id="rightCanvas" width="21" height="1140"></canvas>
-        <canvas ref="bottomCanvas1" id="bottomCanvas1" width="1140" height="600"></canvas>
+        <canvas ref="bottomCanvas1" id="bottomCanvas1" width="1140" height="1140"></canvas>
         <canvas
           ref="topCanvas1"
           id="topCanvas1"
           width="1140"
-          height="600"
+          height="1140"
           @mousedown="handleMouseDown($event, 'R')"
         ></canvas>
       </div>
@@ -42,6 +42,7 @@
         :show-tooltip="false"
       />
     </div>
+ 
   </div>
   <!--纠错功能-->
   <el-dialog v-model="isdialog" title="导联纠错" width="600" @close="close">
@@ -104,6 +105,9 @@ const beatArray2 = ref([]) //备份数据
 let offset = 0
 const spacing = 20
 
+const heightoff=ref(0)//心电图的偏移量 高度变化的时候
+const FD=ref(false)
+
 function handleMouseDown(event, type) {
   if (type === 'L') {
     ctx.value = topCanvas.value.getContext('2d')
@@ -141,17 +145,17 @@ function drawLineAndDistance(point1, point2) {
   //竖线
   if (Math.abs(point2.x - point1.x) <= 20) {
     point2.x = point1.x
-    lineTo(point1.x, point1.y, point2.x, point2.y,1)
+    lineTo(point1.x, point1.y, point2.x, point2.y, 1)
-  } else if (Math.abs(point2.y - point1.y) <= 20) {//横
+  } else if (Math.abs(point2.y - point1.y) <= 20) {
+    //横
     point2.y = point1.y
-    lineTo(point1.x, point1.y, point2.x, point2.y,0)
+    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()
@@ -170,16 +174,15 @@ function lineTo(x, y, x1, y1, type) {
   ctx.value.stroke()
 
   // 计算并绘制距离文本
-  const distance = calculateDistance(x, y, x1,y1)
+  const distance = calculateDistance(x, y, x1, y1)
   const ms = (25.4 / 96) * (25 / 1000) * distance
   ctx.value.font = '11px Arial'
   ctx.value.fillStyle = 'black'
   if (type === 1) {
-    ctx.value.fillText(`距离: ${ms.toFixed(2)}ms`, x + 5, y +30)
+    ctx.value.fillText(`距离: ${ms.toFixed(2)}ms`, x + 5, y + 30)
   } else {
     ctx.value.fillText(`距离: ${ms.toFixed(2)}ms`, x + 10, y - 10)
   }
-
 }
 
 /*鼠标绘制相关*/
@@ -209,17 +212,28 @@ onMounted(async () => {
 })
 
 nextTick(() => {
+  /* 计算宽度和高度*/
   var canvasContainer = document.getElementById('canvas-container')
   var canvasContainer1 = document.getElementById('canvas-container1')
+
+  var leftCanvas = document.getElementById('leftCanvas')
   // 获取元素的计算后的样式
   var style = window.getComputedStyle(canvasContainer)
+  // 获取元素的计算后的样式
+  var leftCanvasstyle = window.getComputedStyle(leftCanvas)
 
   // 获取宽度
   var widthPercentage = style.width
 
+  //获取高度
+  var heightPercentage = style.height
+
   var widthInPixels = canvasContainer.offsetWidth
+  var heightInPixels = canvasContainer.offsetHeight
+
   // 宽度除以 20 并取整
   var adjustedWidth = widthInPixels / 20
+  var adjustedheight = heightInPixels / 20
   // 判断 adjustedWidth 是否为整数
   if (Number.isInteger(adjustedWidth)) {
     canvasContainer.style.width = widthInPixels + 'px'
@@ -230,6 +244,17 @@ nextTick(() => {
     canvasContainer1.style.width = awidth - 20 + 'px'
     console.log('adjustedWidth 不是整数')
   }
+  if (Number.isInteger(adjustedheight)) {
+    canvasContainer.style.height = heightInPixels + 'px'
+    leftCanvas.height = heightInPixels + 'px'
+  } else {
+    const integer = Math.round(adjustedheight)
+    const ahe = integer * 20
+    canvasContainer.style.height = ahe - 118 + 'px'
+    canvasContainer1.style.height = ahe - 118 + 'px'
+    leftCanvas.height = ahe - 118
+    heightoff.value=(ahe -118)/6
+  }
   fetchData()
 })
 
@@ -284,11 +309,12 @@ watch(
     () => infoParams.lineratio,
     () => infoParams.suduratio,
     () => infoParams.isrefresh,
-    () => infoParams.iscorrect
+    () => infoParams.iscorrect,
+    ()=>infoParams.Isfd
   ],
   (
-    [newIsGridValue, newAnotherValue, newlineratio, newsuduratio, newisrefresh, newiniscorrect],
+    [newIsGridValue, newAnotherValue, newlineratio, newsuduratio, newisrefresh, newiniscorrect,newfd],
-    [oldIsGridView, oldAnotherValue, oldlineratio, oldsuduratio, oldisrefresh, oldiscorrect]
+    [oldIsGridView, oldAnotherValue, oldlineratio, oldsuduratio, oldisrefresh, oldiscorrect,oldds]
   ) => {
     // 检查 isGrid 是否发生变化
     if (newIsGridValue !== oldIsGridView) {
@@ -316,6 +342,11 @@ watch(
     if (newiniscorrect !== oldiscorrect) {
       isdialog.value = newiniscorrect
     }
+    if(newfd!==oldds)
+    {
+      FD.value=newfd
+      console.log(FD.value)
+    }
   }
 )
 //恢复导联
@@ -539,7 +570,7 @@ function begin(c_canvas, beatArray) {
   ctx.globalAlpha = 1
   ctx.strokeStyle = '#000000'
   let offset = -50
-  const spacing = 100
+  const spacing = heightoff.value
   beatArray.forEach((dataArray, index) => {
     if (index <= 6) {
       const x = 0
@@ -577,7 +608,7 @@ function beginr(c_canvas, beatArray) {
   ctx.globalAlpha = 1
   ctx.strokeStyle = '#000000'
   let offset = -50
-  const spacing = 100
+  const spacing = heightoff.value
   beatArray.forEach((dataArray, index) => {
     if (index <= 6) {
       const x = 0
@@ -617,7 +648,7 @@ function drawMultipleLinesl(c_canvas, beatArrays) {
   const ctx = c_canvas.getContext('2d')
   ctx.clearRect(0, 0, c_canvas.width, c_canvas.height)
   let offset = 0
-  const spacing = 100
+  const spacing = heightoff.value
   beatArrays.forEach((dataArray, index) => {
     if (index <= 5) {
       drawLine1(c_canvas, dataArray, offset, index)
@@ -630,7 +661,7 @@ function drawMultipleLinesr(c_canvas, beatArrays) {
   const ctx = c_canvas.getContext('2d')
   ctx.clearRect(0, 0, c_canvas.width, c_canvas.height)
   let offset = 0
-  const spacing = 100
+  const spacing = heightoff.value
   beatArrays.forEach((dataArray, index) => {
     if (index > 5) {
       drawLine1(c_canvas, dataArray, offset, index)
@@ -647,11 +678,11 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   if (index <= 5) {
     if (beatArray.length > 0) {
       const firstX = 0
-      const firstY = 50 - beatArray[0] * infoParams.lineratio + offset
+      const firstY = (heightoff.value-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) * infoParams.suduratio
-        const y2 = 50 - beatArray[i + 1] * infoParams.lineratio + offset
+        const y2 = (heightoff.value-50) - beatArray[i + 1] * infoParams.lineratio + offset
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
@@ -661,11 +692,11 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   if (index > 5) {
     if (beatArray.length > 0) {
       const firstX = 0
-      const firstY = 50 - beatArray[0] * infoParams.lineratio + offset
+      const firstY = (heightoff.value-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) * infoParams.suduratio
-        const y2 = 50 - beatArray[i + 1] * infoParams.lineratio + offset
+        const y2 = (heightoff.value-50) - beatArray[i + 1] * infoParams.lineratio + offset
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
@@ -685,6 +716,7 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   overflow-y: hidden;
   height: 100%;
   max-width: 3920px;
+  max-height: 3920px;
 }
 #canvas-container,
 #canvas-container1 {
@@ -692,14 +724,14 @@ function drawLine1(c_canvas, beatArray, offset, index) {
   overflow-y: hidden;
   position: relative;
   width: 50%;
-  height: 600px;
+  height: 77vh;
   margin-right: 0;
 }
 #bottomCanvas,
 #bottomCanvas1 {
   position: absolute;
   /* width: 1140; */
-  height: 600px;
+  /* height: 75vh; */
   z-index: 0;
   margin-left: 20px;
 }
@@ -707,7 +739,7 @@ function drawLine1(c_canvas, beatArray, offset, index) {
 #rightCanvas {
   position: absolute;
   width: 21;
-  height: 600px;
+  /* height: 600px; */
   z-index: 99;
   background-color: rgb(255, 255, 255);
 }
@@ -715,7 +747,7 @@ function drawLine1(c_canvas, beatArray, offset, index) {
 #topCanvas1 {
   position: absolute;
   width: 1140px;
-  height: 600px;
+  /* height: 600px; */
   z-index: 1;
   background: transparent;
   margin-left: 20px;

src/views/tblist/patientexamlistECG/index.vue

@@ -262,7 +262,7 @@
       />
       <el-table-column label="操作" align="center" fixed="right">
         <template #default="scope">
-          <el-button
+          <!-- <el-button
             link
             size="small"
             type="primary"
@@ -271,7 +271,7 @@
             style="color: rgb(56, 119, 246)"
           >
             申请
-          </el-button>
+          </el-button> -->
           <el-button link type="danger" @click="collect(scope.row.id, scope.row.isFavourite)">
             <el-icon v-if="scope.row.isFavourite === '1'"><StarFilled /></el-icon>
             <el-icon v-else><Star /></el-icon>
@@ -487,7 +487,7 @@ const getuporghiorgid = async (id: number, orgId: string, reportstatus: string)
     await message.confirm('是否要进行申请？', '确认提示')
     const data = await PatientexamlistApi.getuporghiid(id, orgId)
     if (data == '申请成功') {
-      message.success(t('common.delSuccess'))
+      message.success('申请成功')
       // 刷新列表
       await getList()
     } else {