修改心电模块

This commit is contained in:
lxd 2024-11-27 16:57:46 +08:00
parent a6ca475896
commit d952c8209d
6 changed files with 565 additions and 554 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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-inputDOM
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;
}
/*心电图区域样式*/

View File

@ -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>

View File

@ -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;

View File

@ -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 {