修改心电模块
This commit is contained in:
parent
a6ca475896
commit
d952c8209d
@ -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>
|
@ -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>
|
@ -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">
|
||||
<div style="font-size: 20px; color: aliceblue">
|
||||
<el-header style="background-color: rgb(79, 138, 240); height: 40px">
|
||||
<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" :icon="Edit">分享</el-button>
|
||||
<el-button type="primary" :icon="Edit">重采</el-button>
|
||||
<el-button type="primary" :icon="Edit">提交诊断</el-button>
|
||||
<el-button type="primary" :icon="Edit">打印</el-button>
|
||||
<el-button type="primary" plain
|
||||
><el-icon><Filter /></el-icon> 采集</el-button
|
||||
>
|
||||
<el-button type="primary" plain :icon="Share">分享</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">
|
||||
<el-button
|
||||
style="width: 30px; height: 30px; margin-bottom: 10px"
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
/>
|
||||
<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"
|
||||
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-button
|
||||
style="width: 30px; height: 30px; margin-bottom: 10px"
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
/>
|
||||
|
||||
<el-dropdown placement="bottom" trigger="click" @command="handleCommand">
|
||||
<el-button
|
||||
style="width: 30px; height: 30px; margin-bottom: 10px"
|
||||
type="primary"
|
||||
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"
|
||||
/>
|
||||
<span style="font-size: 15px; margin-bottom: 10px">放大</span>
|
||||
plain
|
||||
@click="FD()"
|
||||
>
|
||||
<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"
|
||||
@click="FD()"
|
||||
/>
|
||||
plain
|
||||
@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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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-form-item label="T电轴">
|
||||
<el-input v-model="queryParams.taxle" suffix-icon="el-icon-date">
|
||||
<el-col :span="12" style="padding: 1px">
|
||||
<el-form-item label="T电轴" s>
|
||||
<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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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-col :span="12">
|
||||
<el-row :gutter="24" style="margin-right: 1px; height: 35px">
|
||||
<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"
|
||||
ref="inputRef"
|
||||
placeholder=""
|
||||
/>
|
||||
<div>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('I')">I</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('II')">II</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('III')">III</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('aVR')">aVR</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>
|
||||
</div>
|
||||
<div>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V3R')">V3R</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V4R')">V4R</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="success" @click="insertValue('V2')">V2</el-button>
|
||||
<el-button class="mybutwidth" type="success" @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="success" @click="insertValue('V5')">V5</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V6')">V6</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V7')">V7</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V8')">V8</el-button>
|
||||
<el-button class="mybutwidth" type="success" @click="insertValue('V9')">V9</el-button>
|
||||
<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="warning" @click="insertValue('I')">I</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('II')">II</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('III')"
|
||||
>III</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="warning" @click="insertValue('V3R')"
|
||||
>V3R</el-button
|
||||
>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('V4R')"
|
||||
>V4R</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="warning" @click="insertValue('V4')">V4</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('V5')">V5</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('V6')">V6</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('V7')">V7</el-button>
|
||||
<el-button class="mybutwidth" type="warning" @click="insertValue('V8')">V8</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 Isgrid=ref(1)//是否显示网格 1显示 0不显示
|
||||
const Ismeasure=ref(0)//是否开启测量 1开启 0 不开启
|
||||
const IsFD=ref(false)//是否开启放大
|
||||
const age = ref() //年龄
|
||||
const Isgrid = ref(1) //是否显示网格 1显示 0不显示
|
||||
const Ismeasure = ref(0) //是否开启测量 1开启 0 不开启
|
||||
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;
|
||||
Isgrid.value=value
|
||||
const value = Isgrid.value === 1 ? 0 : 1
|
||||
Isgrid.value = value
|
||||
}
|
||||
//是否开启 测量
|
||||
function measure() {
|
||||
const value=Ismeasure.value === 1 ? 0 : 1;
|
||||
Ismeasure.value=value
|
||||
const value = Ismeasure.value === 1 ? 0 : 1
|
||||
Ismeasure.value = value
|
||||
if (value === 1) {
|
||||
message.alertSuccess('开启测量')
|
||||
} else {
|
||||
message.alertSuccess('关闭测量')
|
||||
}
|
||||
}
|
||||
//是否开启 放大
|
||||
function FD() {
|
||||
const value=IsFD.value === false ? true : false;
|
||||
IsFD.value=value
|
||||
const value = IsFD.value === false ? true : false
|
||||
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-color: #000000; /* 设置边框颜色为黑色 */
|
||||
border-width: 1px; /* 设置边框宽度为2像素 */
|
||||
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;
|
||||
}
|
||||
/*心电图区域样式*/
|
||||
|
||||
|
@ -1,164 +1,142 @@
|
||||
<template>
|
||||
<div class="magnifying-glass">
|
||||
<div class="source-box">
|
||||
<div
|
||||
class="zoom-box"
|
||||
:style="{
|
||||
left: zoomPoint.x + 'px',
|
||||
top: zoomPoint.y + 'px'
|
||||
}"
|
||||
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 class="magnifier" v-show="isShow">
|
||||
<!-- 只保留放大的内容 -->
|
||||
<div
|
||||
v-if="isZoomed"
|
||||
class="magnifier-glass"
|
||||
:style="{
|
||||
left: zoomedPosition.x + 'px',
|
||||
top: zoomedPosition.y + 'px',
|
||||
backgroundImage: screenshotUrl ? `url(${screenshotUrl})` : 'none',
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
width: '250px',
|
||||
height: '250px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from 'vue'
|
||||
let canvas = null
|
||||
let lookCanvas = null
|
||||
// 桌布
|
||||
let zoomBox = null
|
||||
let canvasWidth = 50
|
||||
let canvasHeight = 50
|
||||
// look-canvas 的展示位置设置
|
||||
let lookPoint = reactive({
|
||||
top: 0,
|
||||
left: 50
|
||||
})
|
||||
// 原图的坐标
|
||||
let points = { x: 0, y: 0 }
|
||||
// 放大 图片的坐标
|
||||
let showPoint = { x: 0, y: 0 }
|
||||
// 桌布位置坐标
|
||||
let zoomPoint = reactive({
|
||||
import { ref, reactive } from 'vue'
|
||||
import html2canvas from 'html2canvas'
|
||||
import ECGForm from './ECGForm.vue'
|
||||
|
||||
const isShow = ref(true)
|
||||
const isZoomed = ref(false)
|
||||
const screenshotUrl = ref('')
|
||||
const zoomedPosition = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
// 鼠标 mousedow 窗口坐标点记录
|
||||
let startPoint = { x: 0, y: 0 }
|
||||
let isShow = ref(false)
|
||||
let image = null
|
||||
// 放大倍数
|
||||
let multiple = 3
|
||||
// 获取图片资源
|
||||
async function getImage(url) {
|
||||
const response = await fetch(url)
|
||||
const blob = await response.blob()
|
||||
const image = await createImageBitmap(blob)
|
||||
return image
|
||||
|
||||
// 捕获指定区域的内容
|
||||
async function captureArea(x, y) {
|
||||
try {
|
||||
const container = document.querySelector('.el-tab-pane')
|
||||
if (!container) return
|
||||
const captureSize = 50
|
||||
const rect = container.getBoundingClientRect()
|
||||
const left = x - captureSize / 2
|
||||
const top = y - captureSize / 2
|
||||
|
||||
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
|
||||
lookCanvas.width = canvasWidth
|
||||
lookCanvas.height = canvasHeight
|
||||
// 处理鼠标点击
|
||||
function handleMouseDown(e) {
|
||||
if (e.button === 0) {
|
||||
// 左键点击
|
||||
if (isZoomed.value) {
|
||||
// 如果已经放大,则清除
|
||||
isZoomed.value = false
|
||||
screenshotUrl.value = ''
|
||||
} else {
|
||||
// 如果未放大,则进行截图
|
||||
captureArea(e.clientX, e.clientY)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
|
||||
// function handleKeyPress(e) {
|
||||
// if (e.key === 'Escape') {
|
||||
// isShow.value = !isShow.value
|
||||
// isZoomed.value = false
|
||||
// screenshotUrl.value = ''
|
||||
|
||||
canvas.addEventListener('mousedown', canvasMousedown)
|
||||
window.addEventListener('mouseup', windowMouseUp)
|
||||
// if (isShow.value) {
|
||||
// document.addEventListener('mousedown', handleMouseDown)
|
||||
// } else {
|
||||
// document.removeEventListener('mousedown', handleMouseDown)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
// document.addEventListener('keydown', handleKeyPress)
|
||||
})
|
||||
|
||||
function canvasMousedown(e) {
|
||||
let { offsetX, offsetY, clientX, clientY } = e
|
||||
points = {
|
||||
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)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
//document.removeEventListener('keydown', handleKeyPress)
|
||||
// document.removeEventListener('mousedown', handleMouseDown)
|
||||
})
|
||||
|
||||
function windowMouseUp(e) {
|
||||
isShow.value = false
|
||||
window.removeEventListener('mousemove', windowMouseMove)
|
||||
}
|
||||
nextTick(() => {
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
function lookCanvasDraw(canvas, image, canvasWidth, canvasHeight, multiple = 2) {
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
|
||||
ctx.drawImage(image, showPoint.x, showPoint.y, canvasWidth * multiple, canvasHeight * multiple)
|
||||
}
|
||||
|
||||
// 设置 放大镜查看 图片位置
|
||||
function setShowPoint(X, Y) {
|
||||
if (X > 500) {
|
||||
X = 500
|
||||
});
|
||||
const infoParams = defineProps({
|
||||
Isfd: Boolean
|
||||
})
|
||||
// 修改 watch,监听 props.isFD
|
||||
watch([() => infoParams.Isfd], ([newfd], [oldds]) => {
|
||||
if (newfd !== oldds) {
|
||||
console.log(newfd)
|
||||
if (newfd) {
|
||||
document.addEventListener('mousedown', handleMouseDown)
|
||||
} else {
|
||||
document.removeEventListener('mousedown', handleMouseDown)
|
||||
}
|
||||
}
|
||||
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 {
|
||||
position: relative;
|
||||
/* margin-left: 50px; */
|
||||
}
|
||||
.source-box {
|
||||
/* margin-top: 50px; */
|
||||
position: relative;
|
||||
width: 50px;
|
||||
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%;
|
||||
.magnifier {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#source-canvas,
|
||||
#look-canvas {
|
||||
background-color: #eee;
|
||||
}
|
||||
#look-canvas {
|
||||
position: absolute;
|
||||
.magnifier-glass {
|
||||
position: fixed;
|
||||
border: 2px solid rgba(255, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
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>
|
||||
|
@ -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="bottomCanvas" id="bottomCanvas" width="1140" height="600"></canvas>
|
||||
<canvas ref="leftCanvas" id="leftCanvas" width="21" height="1140"></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="bottomCanvas1" id="bottomCanvas1" width="1140" height="600"></canvas>
|
||||
<canvas ref="rightCanvas" id="rightCanvas" width="21" height="1140"></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)
|
||||
} else if (Math.abs(point2.y - point1.y) <= 20) {//横
|
||||
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)
|
||||
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],
|
||||
[oldIsGridView, oldAnotherValue, oldlineratio, oldsuduratio, oldisrefresh, oldiscorrect]
|
||||
[newIsGridValue, newAnotherValue, newlineratio, newsuduratio, newisrefresh, newiniscorrect,newfd],
|
||||
[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;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user