lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增模块 心电

Browse Source
This commit is contained in:
lxd 2024-11-22 18:36:09 +08:00
parent 76e9332870
commit 06521f4d32
9 changed files with 2115 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/api/tblist/ecganalysisparas/index.ts Normal file
View File

@ -0,0 +1,79 @@
import request from '@/config/axios'
// 心电分析数据 VO
export interface EcganalysisparasVO {
id: string // 主键
orgId: string // 机构ID
examId: string // 检查ID：体检编号、住院号、门诊号等
collectionTime: Date // 采集时间
hr: string // 心率
pAxle: string // P电轴
qrsAxle: string // QRS电轴
tAxle: string // T电轴
pTimeLimit: string // P波时限
pr: string // PR间期
qrsTimeLimit: string // QRS时限
qt: string // QT间期
qtc: string // QTC间期
rv5: string // 胸导V5导联电压
sv1: string // V1导联S波深度
rv5Sv1: string // RV5+SV1
snapshotTime: Date // 快照时间：参考心电波形的起始时间
autoDiagResult: string // 算法自动诊断结果
autoDiagTime: Date // 自动诊断的时间
doctorDiagResult: string // 医生诊断结果
doctorDiagTime: string // 医生诊断的时间
doctorName: string // 诊断医生的姓名
doctorId: string // 诊断医生的医生id
departId: string // 诊断医生的科室id
departName: string // 诊断医生的科室名称
isDelete: string // 是否删除： 1 为删除
deleteTime: Date // 删除时间
deleteDoctorName: string // 执行删除操作的医生姓名
deleteDoctorId: string // 执行删除操作的医生id
ecgDataFilePath: string // 心电数据文件的路径： 路径或URL
ecgJsonDataFilePath: string // 心电数据json格式的数据文件路径：路径或URL
createDate: Date // 分析参数的创建时间
}
// 心电分析数据 API
export const EcganalysisparasApi = {
// 查询心电分析数据分页
getEcganalysisparasPage: async (params: any) => {
return await request.get({ url: `/tblist/ecganalysisparas/page`, params })
},
// 查询心电分析数据详情
getEcganalysisparas: async (id: number) => {
return await request.get({ url: `/tblist/ecganalysisparas/get?id=` + id })
},
// 新增心电分析数据
createEcganalysisparas: async (data: EcganalysisparasVO) => {
return await request.post({ url: `/tblist/ecganalysisparas/create`, data })
},
// 修改心电分析数据
updateEcganalysisparas: async (data: EcganalysisparasVO) => {
return await request.put({ url: `/tblist/ecganalysisparas/update`, data })
},
// 保存心电分析数据
SaveEcganalysisparas: async (data: EcganalysisparasVO) => {
return await request.put({ url: `/tblist/ecganalysisparas/save`, data })
},
// 删除心电分析数据
deleteEcganalysisparas: async (id: number) => {
return await request.delete({ url: `/tblist/ecganalysisparas/delete?id=` + id })
},
// 导出心电分析数据 Excel
exportEcganalysisparas: async (params) => {
return await request.download({ url: `/tblist/ecganalysisparas/export-excel`, params })
},
// 按照examId查询心电分析数据详情
getexamIDdata: async (examId: String) => {
return await request.get({ url: `/tblist/ecganalysisparas/getexamIDdata?examId=` + examId })
},
}

2
src/router/index.ts
View File

@ -5,7 +5,7 @@ import remainingRouter from './modules/remaining'
// 创建路由实例
const router = createRouter({
history: createWebHistory(), // createWebHashHistory URL带#，createWebHistory URL不带# liunx 病理 需要在这里加 '/bl/'
history: createWebHistory(), // createWebHashHistory URL带#，createWebHistory URL不带# liunx 病理 需要在这里加 '/bl/' 李晓东
strict: true,
routes: remainingRouter as RouteRecordRaw[],
scrollBehavior: () => ({ left: 0, top: 0 })

16
src/utils/formatTime.ts
View File

@ -88,6 +88,22 @@ export function getNowDateTimeS() {
const formattedDate = dayjs(formattedDateTime).toDate();
return formattedDate;
}
/**
* 获取当前的日期+时间 YYYY-MM-DD HH:mm:ss 后端字段是LocalDateTime
*/
export function getCurrentLocalDateTime () {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
const day = String(now.getDate()).padStart(2, '0');
const hour = String(now.getHours()).padStart(2, '0');
const minute = String(now.getMinutes()).padStart(2, '0');
const second = String(now.getSeconds()).padStart(2, '0');
const value=`${year}-${month}-${day}T${hour}:${minute}:${second}`
// 构建LocalDateTime格式的字符串
return value ;
};
/**
* 获取当前日期是第几周
* @param dateTime 当前传入的日期值

116
src/views/ECG/ECGBB.vue Normal file
View File

@ -0,0 +1,116 @@
<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>

145
src/views/ECG/ECGFD.vue Normal file
View File

@ -0,0 +1,145 @@
<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>

475
src/views/ECG/ECGForm.vue Normal file
View File

@ -0,0 +1,475 @@
<template>
<!-- <div class="myArea"> -->
<el-dialog
:title="dialogTitle"
v-model="dialogVisible"
:fullscreen="true"
append-to-body
: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">
<span>{{ rowinfo.pname }}</span>
<span style="margin-left: 10px"> {{ rowinfo.gender }}</span>
<span style="margin-left: 10px"> {{ age + '岁' }}</span>
<span style="margin-left: 10px"> 检查编号：{{ rowinfo.examId }}</span>
<span style="margin-left: 10px">
检查日期：{{ formatDate(rowinfo.examDate, 'YYYY-MM-DD HH:mm:ss') }}</span
>
<span style="margin-left: 10px">检查机构： {{ rowinfo.orgName }}</span>
</div>
</el-header>
<!--头部 功能按钮-->
<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-group>
</el-header>
<el-container>
<!--左侧 心电图区域-->
<el-aside width="97%" style="height: 750px">
<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"/>
</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"
/>
<span style="font-size: 15px; margin-bottom: 10px">走速</span>
<el-button
style="width: 30px; height: 30px; margin-bottom: 10px"
type="primary"
:icon="Edit"
/>
<span style="font-size: 15px; margin-bottom: 10px">振幅</span>
<el-button
style="width: 30px; height: 30px; margin-bottom: 10px"
type="primary"
:icon="Edit"
@click="measure()"
/>
<span style="font-size: 15px; margin-bottom: 10px">测量</span>
<el-button
style="width: 30px; height: 30px; margin-bottom: 10px"
type="primary"
:icon="Edit"
/>
<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()"
/>
<span style="font-size: 15px; margin-bottom: 10px">纠错</span>
<el-button
style="width: 30px; height: 30px; margin-bottom: 10px"
type="primary"
:icon="Edit"
@click="Isgriddisplay()"
/>
<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-row :gutter="24">
<el-col :span="12">
<el-form-item label="心率">
<el-input v-model="queryParams.hr" suffix-icon="el-icon-date">
<template #append>bpm</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="P电轴">
<el-input v-model="queryParams.paxle" suffix-icon="el-icon-date">
<template #append>°</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="QRS电轴">
<el-input v-model="queryParams.qrsAxle" suffix-icon="el-icon-date">
<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">
<template #append>°</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="P波时限">
<el-input v-model="queryParams.ptimeLimit" suffix-icon="el-icon-date">
<template #append>ms</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="PR间期">
<el-input v-model="queryParams.pr" suffix-icon="el-icon-date">
<template #append>ms</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第四行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="QRS时限">
<el-input v-model="queryParams.qrsTimeLimit" suffix-icon="el-icon-date">
<template #append>ms</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="QT间期">
<el-input v-model="queryParams.qt" suffix-icon="el-icon-date">
<template #append>ms</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第五行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="QTc">
<el-input v-model="queryParams.qtc" suffix-icon="el-icon-date">
<template #append>ms</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="RV5">
<el-input v-model="queryParams.rv5" suffix-icon="el-icon-date">
<template #append>mV</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第六行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="SV1">
<el-input v-model="queryParams.sv1" suffix-icon="el-icon-date">
<template #append>mV</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="RV5+SV1">
<el-input v-model="queryParams.rv5Sv1" suffix-icon="el-icon-date">
<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-input
v-model="snapshotTime"
style="width: 100%"
:rows="3"
type="textarea"
placeholder=""
/>
<el-tag type="info" style="font-size: 16px; width: 100%">智能词库</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"
/>
<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>
</div>
<div class="mycenter-button">
<el-button style="width: 200px" type="primary" plain @click="save">保存</el-button>
</div>
</el-form>
</div>
</div>
</el-dialog>
<!-- </div> -->
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ArrowLeft, ArrowRight, Delete, Edit, Share } 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'
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const id = ref() //患者ID
const rowinfo = ref() //当前患者数据行
const snapshotTime = ref() //心电事件快照事件
// 定义一个响应式变量来控制子组件的显示
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 open = async (row: any) => {
dialogVisible.value = true
dialogTitle.value = '心电分析'
id.value = row.regId
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// 没次打开都是显示的 只有点击网格才会变化
isChildVisible.value = true
}
// 返回的列表的数据
const queryParams = ref({
id: '',
orgId: '',
examId: '',
collectionTime: undefined,
hr: '',
paxle: '',
qrsAxle: '',
taxle: '',
ptimeLimit: '',
pr: '',
qrsTimeLimit: '',
qt: '',
qtc: '',
rv5: '',
sv1: '',
rv5Sv1: '',
snapshotTime: undefined,
autoDiagResult: '',
autoDiagTime: undefined,
doctorDiagResult: '',
doctorDiagTime: undefined,
doctorName: '',
doctorId: '',
departId: '',
departName: '',
isDelete: '',
deleteTime: undefined,
deleteDoctorName: '',
deleteDoctorId: '',
ecgDataFilePath: '',
ecgJsonDataFilePath: '',
createDate: undefined
})
//
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
saveFormVO.value.qrsAxle = queryParams.value.qrsAxle
saveFormVO.value.tAxle = queryParams.value.taxle
saveFormVO.value.qrsTimeLimit = queryParams.value.ptimeLimit
saveFormVO.value.pr = queryParams.value.pr
saveFormVO.value.qrsTimeLimit = queryParams.value.qrsTimeLimit
saveFormVO.value.qt = queryParams.value.qt
saveFormVO.value.qtc = queryParams.value.qtc
saveFormVO.value.rv5 = queryParams.value.rv5
saveFormVO.value.sv1 = queryParams.value.sv1
saveFormVO.value.rv5Sv1 = queryParams.value.rv5Sv1
saveFormVO.value.autoDiagResult = queryParams.value.autoDiagResult
saveFormVO.value.doctorDiagResult = queryParams.value.doctorDiagResult
saveFormVO.value.doctorName = Profilevo.value.doctorname
saveFormVO.value.doctorId = Profilevo.value.doctorID
// saveFormVO.value.departId=queryParams.value.departId
// saveFormVO.value.departName=queryParams.value.departName
const ret = await EcganalysisparasApi.SaveEcganalysisparas(saveFormVO.value)
if (ret) {
message.success('保存成功')
}
}
//是否显示网格
function Isgriddisplay() {
const value=Isgrid.value === 1 ? 0 : 1;
Isgrid.value=value
}
//是否开启 测量
function measure() {
const value=Ismeasure.value === 1 ? 0 : 1;
Ismeasure.value=value
}
//是否开启 放大
function FD() {
const value=IsFD.value === false ? true : false;
IsFD.value=value
}
//根据光标位置 插入值
const insertValue = (textvalue: String) => {
const textarea = inputRef.value.$el.querySelector('textarea') // 获取textarea DOM元素
const start = textarea.selectionStart // 光标位置
const end = textarea.selectionEnd
const value = textarea.value // 当前输入框的值
queryParams.value.doctorDiagResult = value.slice(0, start) + textvalue + value.slice(end)
// 更新光标位置
textarea.selectionStart = textarea.selectionEnd = start + textvalue.length
//textarea.focus() // 使输入框重新获得焦点
}
// 创建一个计算属性来转换时间戳
function formattedDate(timestamp) {
const date = new Date(timestamp)
const strdata = formatDate(date, 'YYYY-MM-DD HH:mm:ss')
return strdata // 转换为本地日期时间字符串
}
//获取当前登录人信息
const getlogininfo = async () => {
Profilevo.value = await getUserProfile()
}
// 计算年龄
const calculateAge = (birthdate) => {
if (!birthdate) {
age.value = null
return
}
const today = new Date()
const birth = new Date(birthdate)
let yearsDiff = today.getFullYear() - birth.getFullYear()
// Check if the birthday hasn't occurred yet this year
const hasBirthdayPassed =
today.getMonth() > birth.getMonth() ||
(today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate())
if (!hasBirthdayPassed) {
yearsDiff--
}
age.value = yearsDiff
}
/*心电图数据相关*/
/*心电图数据相关*/
defineOptions({ name: 'ECGForm' })
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style scoped>
.mycontainer {
display: flex;
width: 100%;
}
.myleft-box {
flex: 4; /* 左侧盒子占据一半空间 */
border-style: solid; /* 设置边框样式为实线 */
border-width: 2px; /* 设置边框宽度为2像素 */
border-color: #000000; /* 设置边框颜色为黑色 */
}
.myright-box {
flex: 1; /* 右侧盒子占据一半空间 */
}
.mybutwidth {
margin-left: 10px;
margin-bottom: 5px;
width: 50px;
}
.mycenter-button {
display: flex; /* 启用Flexbox布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100px; /* 根据需要设置容器高度 */
}
/*心电图区域样式*/
/*心电图区域样式*/
</style>

164
src/views/ECG/ECGSB.vue Normal file
View File

@ -0,0 +1,164 @@
<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>
</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({
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
}
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
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
canvas.addEventListener('mousedown', canvasMousedown)
window.addEventListener('mouseup', windowMouseUp)
})
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)
}
function windowMouseUp(e) {
isShow.value = false
window.removeEventListener('mousemove', windowMouseMove)
}
function windowMouseMove(e) {
let { clientX, clientY } = e
let x = points.x + clientX - startPoint.x
let y = points.y + clientY - startPoint.y
setShowPoint(x, y)
lookCanvasDraw(lookCanvas, image, canvasWidth, canvasHeight, multiple)
}
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
}
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%;
}
#source-canvas,
#look-canvas {
background-color: #eee;
}
#look-canvas {
position: absolute;
}
</style>

563
src/views/ECG/ECGhtml.vue Normal file
View File

@ -0,0 +1,563 @@
<template>
<div>
<!-- <button @click="moveCanvas('left')">左边-左移</button>
<button @click="moveCanvas('right')">左边-右移</button>-->
<div class="container">
<BB>
<div id="canvas-container">
<canvas ref="leftCanvas" id="leftCanvas" width="21" height="600"></canvas>
<canvas ref="bottomCanvas" id="bottomCanvas" width="1140" height="600"></canvas>
<canvas
ref="topCanvas"
id="topCanvas"
width="1140"
height="600"
@mousedown="handleMouseDown($event, 'L')"
></canvas>
</div>
</BB>
<div id="canvas-container1">
<canvas ref="rightCanvas" id="rightCanvas" width="21" height="600"></canvas>
<canvas ref="bottomCanvas1" id="bottomCanvas1" width="1140" height="600"></canvas>
<canvas
ref="topCanvas1"
id="topCanvas1"
width="1140"
height="600"
@mousedown="handleMouseDown($event, 'R')"
></canvas>
</div>
</div>
<el-slider v-model="sliderValue" :min="0" :max="50" :step="1" @input="handleSliderChange" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { number } from 'vue-types'
import Magnifier from './ECGFD.vue'
import sb from './ECGSB.vue'
import BB from './ECGBB.vue'
//读取出来的json
const text = ref()
const sliderValue = ref(0) // 初始化滑块值
const previousValue = ref(0) // 记录上一个滑块值
const swipeDirection = ref('') // 用于存储滑动方向
// 响应式引用
const leftCanvas = ref(null)
const rightCanvas = ref(null)
const bottomCanvas = ref(null)
const bottomCanvas1 = ref(null)
const topCanvas = ref(null)
const topCanvas1 = ref(null)
const url = ref()
/*鼠标绘制相关*/
const ctx = ref(null)
const isVertical = ref(false) // 控制线条类型，true 为竖直，false 为水平
const lastPoint = ref(null) // 用于存储上一个点的坐标
function handleMouseDown(event, type) {
if (type === 'L') {
ctx.value = topCanvas.value.getContext('2d')
} else if (type === 'R') {
ctx.value = topCanvas1.value.getContext('2d')
}
if (infoParams.Ismeasure !== 1) {
return
}
const rect =
type === 'L'
? topCanvas.value.getBoundingClientRect()
: topCanvas1.value.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
if (lastPoint.value) {
// 如果已经有一个点被记录，那么使用这个新点和上一个点绘制线条
drawLineAndDistance(lastPoint.value, { x, y })
lastPoint.value = null // 重置上一个点
} else {
// 记录这个点作为上一个点
lastPoint.value = { x, y }
}
}
function calculateDistance(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
}
function drawLineAndDistance(point1, point2) {
//ctx.value.clearRect(0, 0, topCanvas.value.width, topCanvas.value.height); // 清除画布
// 绘制两个点
ctx.value.fillStyle = 'black'
ctx.value.beginPath()
ctx.value.arc(point1.x, point1.y, 1, 0, 2 * Math.PI)
ctx.value.fill()
ctx.value.beginPath()
ctx.value.arc(point2.x, point2.y, 1, 0, 2 * Math.PI)
ctx.value.fill()
// 绘制直线
ctx.value.beginPath()
ctx.value.moveTo(point1.x, point1.y)
ctx.value.lineTo(point2.x, point2.y)
ctx.value.strokeStyle = 'black'
ctx.value.lineWidth = 1
ctx.value.stroke()
// 计算并绘制距离文本
const distance = calculateDistance(point1.x, point1.y, point2.x, point2.y)
ctx.value.font = '11px Arial'
ctx.value.fillStyle = 'black'
ctx.value.fillText(`距离: ${distance.toFixed(2)}px`, point1.x + 10, point1.y - 10)
}
/*鼠标绘制相关*/
const handleSliderChange = (value) => {
if (value > previousValue.value) {
swipeDirection.value = '右滑' // 向右滑动
moveCanvas('left')
} else if (value < previousValue.value) {
swipeDirection.value = '左滑' // 向左滑动
moveCanvas('right')
} else {
swipeDirection.value = '未滑动' // 没有滑动
}
previousValue.value = value // 更新上一个值
console.log('滑块值改变为:', value)
}
//渲染组件后执行
onMounted(async () => {
console.log('挂载完成' + infoParams.Isgrid)
// topCanvas.value = document.getElementById('topCanvas');
})
nextTick(() => {
var canvasContainer = document.getElementById('canvas-container')
var canvasContainer1 = document.getElementById('canvas-container1')
// 获取元素的计算后的样式
var style = window.getComputedStyle(canvasContainer)
// 获取宽度
var widthPercentage = style.width
var widthInPixels = canvasContainer.offsetWidth
// 宽度除以 20 并取整
var adjustedWidth = widthInPixels / 20
// 判断 adjustedWidth 是否为整数
if (Number.isInteger(adjustedWidth)) {
canvasContainer.style.width = widthInPixels + 'px'
} else {
const integer = Math.round(adjustedWidth)
const awidth = integer * 20
canvasContainer.style.width = awidth - 20 + 'px'
canvasContainer1.style.width = awidth - 20 + 'px'
console.log('adjustedWidth 不是整数')
}
fetchData()
})
// 定义异步方法
const fetchData = async () => {
try {
text.value = await fetchFileContent(infoParams.jsonurl)
handleFileChange()
Bottom()
// console.log('获取到的数据:', text.value);
} catch (error) {
console.error('获取数据时出错:', error)
}
}
const inputSlider = (value) => {
setScrollTop(value)
}
const formatTooltip = (value) => {
return `${value} px`
}
async function fetchFileContent(url) {
try {
const response = await fetch(url)
if (!response.ok) {
throw new Error('网络响应不是 ok')
}
return await response.text() // 返回文本内容
} catch (error) {
console.error('获取文件内容时出错:', error)
throw error // 抛出错误以便调用者可以处理
}
}
///接受参数
const infoParams = defineProps({
jsonurl: String,
examId: String,
Isgrid: Number,
Ismeasure: Number,
Isfd: Boolean
})
// // 使用 watch 来监听 parentValue 的变化
// watch(
// () => infoParams.Isgrid,
// (newValue, oldValue) => {
// console.log(`Isgrid 从 ${oldValue} 变化到 ${newValue}`)
// }
// )
// 监听多个值的变化
watch(
[() => infoParams.Isgrid, () => infoParams.Ismeasure],
([newIsGridValue, newAnotherValue], [oldIsGridView, oldAnotherValue]) => {
// 检查 isGrid 是否发生变化
if (newIsGridValue !== oldIsGridView) {
console.log(`isGrid 从 ${oldIsGridView} 变化到 ${newIsGridValue}`)
// 值发送变化的时候 重新绘制 先清除画布
eliminate(leftCanvas.value)
eliminate(rightCanvas.value)
eliminate(bottomCanvas.value)
eliminate(bottomCanvas1.value)
eliminate(topCanvas.value)
eliminate(topCanvas1.value)
Bottom()
}
// 检查 anotherValue 是否发生变化
if (newAnotherValue !== oldAnotherValue) {
console.log(`anotherValue 从 ${oldAnotherValue} 变化到 ${newAnotherValue}`)
// 是否开启测量
}
}
)
// 响应式数据
let beatArray1 = []
let offset = 0
const spacing = 20
// 定义要处理的键
const leads = [
'LEAD_I',
'LEAD_II',
'LEAD_III',
'LEAD_AVR',
'LEAD_AVL',
'LEAD_AVF',
'LEAD_V1',
'LEAD_V2',
'LEAD_V3',
'LEAD_V4',
'LEAD_V5',
'LEAD_V6'
]
// 每个心电波形名称数组
const lead_name = ['I', 'II', 'III', 'aVR', 'aVL', 'aVF']
const rlead_name = ['V1', 'V2', 'V3', 'V4', 'V5', 'V6']
//将读取到的文件转换成数组
function handleFileChange() {
const json = JSON.parse(text.value)
leads.forEach((lead, index) => {
const value = json[lead].trim()
const commaSeparatedValue = value.replace(/\s+/g, ',')
const numberArray = commaSeparatedValue.split(',').map(Number)
beatArray1.push(numberArray)
})
}
// 定义移动画布的函数
function moveCanvas(direction) {
if (direction === 'left') {
if (offset !== -20 * 40) offset -= spacing
} else if (direction === 'right') {
if (offset !== 0) offset += spacing
}
// if (direction === 'left') {
// offset -= spacing
// } else if (direction === 'right') {
// offset += spacing
// }
topCanvas.value.style.left = offset + 'px'
topCanvas1.value.style.left = offset + 'px'
}
//清除画布内容
function eliminate(c_canvas) {
const ctx = c_canvas.getContext('2d')
ctx.clearRect(0, 0, c_canvas.width, c_canvas.height)
}
function Bottom() {
drawBottomCanvas()
drawTopCanvas()
}
// 绘制底层画布的内容
function drawBottomCanvas() {
if (infoParams.Isgrid === 1) {
lbackcanvas(leftCanvas.value)
rbackcanvas(rightCanvas.value)
drawMultipleLines(bottomCanvas.value, beatArray1)
drawMultipleLines(bottomCanvas1.value, beatArray1)
}
begin(leftCanvas.value, beatArray1)
beginr(rightCanvas.value, beatArray1)
}
// 绘制顶层画布的内容
function drawTopCanvas() {
drawMultipleLinesl(topCanvas.value, beatArray1)
drawMultipleLinesr(topCanvas1.value, beatArray1)
}
//定标电压的画布
function lbackcanvas(c_canvas) {
drawBigBG(c_canvas)
drawSmallGrid(c_canvas)
drawMediumGrid(c_canvas)
}
function rbackcanvas(c_canvas) {
drawBigBG(c_canvas)
drawSmallGrid(c_canvas)
drawMediumGrid(c_canvas)
}
// 绘制函数
function drawBigBG(c_canvas) {
const context = c_canvas.getContext('2d')
context.globalAlpha = 1
context.fillStyle = 'rgba(0,0,0,0)'
context.fillRect(0, 0, c_canvas.width + 21, c_canvas.height + 21)
}
//画小格子
function drawSmallGrid(c_canvas) {
const context = c_canvas.getContext('2d')
context.globalAlpha = 1
context.fillStyle = '#ff6b64'
const dotMarginX = 20 / 5,
dotMarginY = 20 / 5
for (let i = dotMarginX; i < c_canvas.width; i += dotMarginX) {
if (i % 20 !== 0) {
for (let j = dotMarginY; j < c_canvas.height; j += dotMarginY) {
if (j % 20 !== 0) {
context.rect(i, j, 1, 0.5)
}
}
}
}
context.fill()
}
//中格子
function drawMediumGrid(c_canvas) {
const context = c_canvas.getContext('2d')
context.globalAlpha = 1
context.strokeStyle = '#ff6b64'
context.strokeWidth = 1.5
context.beginPath()
for (let x = 0.5; x < c_canvas.width; x += 20) {
context.moveTo(x, 0)
context.lineTo(x, c_canvas.height)
}
for (let y = 0.5; y < c_canvas.height; y += 20) {
context.moveTo(0, y)
context.lineTo(c_canvas.width, y)
}
context.stroke()
context.closePath()
}
function begin(c_canvas, beatArray) {
const ctx = c_canvas.getContext('2d')
ctx.globalAlpha = 1
ctx.strokeStyle = '#000000'
let offset = -50
const spacing = 100
beatArray.forEach((dataArray, index) => {
if (index <= 6) {
const x = 0
const y = offset - dataArray[index - 1] * 0.025
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x + 5, y)
ctx.moveTo(x + 5, y - 40)
ctx.lineTo(x + 15, y - 40)
ctx.moveTo(x + 5, y - 40)
ctx.lineTo(x + 5, y)
ctx.moveTo(x + 15, y - 40)
ctx.lineTo(x + 15, y)
ctx.moveTo(x + 15, y)
ctx.lineTo(x + 20, y)
ctx.stroke()
ctx.closePath()
if (index > 0 && index < 4) {
ctx.font = '15px Arial'
ctx.fillStyle = 'black'
ctx.fillText(lead_name[index - 1], x + 4, y + 14)
} else {
ctx.font = '10px Arial'
ctx.fillStyle = 'black'
ctx.fillText(lead_name[index - 1], x + 1, y + 12)
}
offset += spacing
}
})
ctx.strokeStyle = '#000000'
}
function beginr(c_canvas, beatArray) {
const ctx = c_canvas.getContext('2d')
ctx.globalAlpha = 1
ctx.strokeStyle = '#000000'
let offset = -50
const spacing = 100
beatArray.forEach((dataArray, index) => {
if (index <= 6) {
const x = 0
const y = offset - dataArray[index - 1] * 0.025
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x + 5, y)
ctx.moveTo(x + 5, y - 40)
ctx.lineTo(x + 15, y - 40)
ctx.moveTo(x + 5, y - 40)
ctx.lineTo(x + 5, y)
ctx.moveTo(x + 15, y - 40)
ctx.lineTo(x + 15, y)
ctx.moveTo(x + 15, y)
ctx.lineTo(x + 20, y)
ctx.stroke()
ctx.closePath()
ctx.font = '11px Arial'
ctx.fillStyle = 'black'
ctx.fillText(rlead_name[index - 1], x + 2, y + 12)
offset += spacing
}
})
ctx.strokeStyle = '#000000'
}
//背景
function drawMultipleLines(c_canvas, beatArrays) {
const ctx = c_canvas.getContext('2d')
ctx.clearRect(0, 0, c_canvas.width, c_canvas.height)
drawBigBG(c_canvas)
drawSmallGrid(c_canvas)
drawMediumGrid(c_canvas)
}
//左边心电图
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
beatArrays.forEach((dataArray, index) => {
if (index <= 5) {
drawLine1(c_canvas, dataArray, offset, index)
offset += spacing
}
})
}
//右边心电图
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
beatArrays.forEach((dataArray, index) => {
if (index > 5) {
drawLine1(c_canvas, dataArray, offset, index)
offset += spacing
}
})
}
//画心电图线
function drawLine1(c_canvas, beatArray, offset, index) {
const ctx = c_canvas.getContext('2d')
ctx.strokeStyle = '#030101'
ctx.lineWidth = 1
ctx.beginPath()
if (index <= 5) {
if (beatArray.length > 0) {
const firstX = 0
const firstY = 50 - beatArray[0] * 0.025 + offset
ctx.moveTo(firstX, firstY)
for (let i = 0; i < beatArray.length - 1; i++) {
const x2 = 0 + (i + 1) / 10
const y2 = 50 - beatArray[i + 1] * 0.025 + offset
ctx.lineTo(x2, y2)
}
ctx.stroke()
ctx.closePath()
}
}
if (index > 5) {
if (beatArray.length > 0) {
const firstX = 0
const firstY = 50 - beatArray[0] * 0.025 + offset
ctx.moveTo(firstX, firstY)
for (let i = 0; i < beatArray.length - 1; i++) {
const x2 = 0 + (i + 1) / 10
const y2 = 50 - beatArray[i + 1] * 0.025 + offset
ctx.lineTo(x2, y2)
}
ctx.stroke()
ctx.closePath()
}
}
}
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 600px;
max-width: 3920px;
}
#canvas-container,
#canvas-container1 {
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 50%;
height: 600px;
margin-right: 0;
}
#bottomCanvas,
#bottomCanvas1 {
position: absolute;
/* width: 1140; */
height: 600px;
z-index: 0;
margin-left: 20px;
}
#leftCanvas,
#rightCanvas {
position: absolute;
width: 21;
height: 600px;
z-index: 99;
background-color: rgb(255, 255, 255);
}
#topCanvas,
#topCanvas1 {
position: absolute;
width: 1140px;
height: 600px;
z-index: 1;
background: transparent;
margin-left: 20px;
}
canvas {
position: absolute;
}
/* 添加其他样式 */
</style>

556
src/views/tblist/patientexamlistECG/index.vue Normal file
View File

@ -0,0 +1,556 @@
<template>
<ContentWrap style="height: 145px">
<!-- 搜索工作栏 超声工作站-->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="100px"
>
<el-row :gutter="8">
<!-- 检查ID和患者姓名共一行 -->
<el-col :span="24">
<el-row :gutter="8">
<el-col :span="4">
<el-form-item label="检查单号" prop="examId">
<el-input
v-model="queryParams.examId"
placeholder="检查单号"
clearable
@keyup.enter="handleQuery"
class="!w-160px"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="患者姓名" prop="pName">
<el-input
v-model="queryParams.pname"
placeholder="请输入患者姓名"
clearable
@keyup.enter="handleQuery"
class="!w-160px"
/>
</el-form-item>
</el-col>
<!-- 报告状态 -->
<el-col :span="4">
<el-form-item label="报告状态" prop="reportstatus">
<el-select
v-model="queryParams.reportstatus"
placeholder="请选择报告状态"
clearable
class="!w-160px"
>
<el-option label="已分检" value="已分检" />
<el-option label="已分析" value="已分析" />
<el-option label="待分析" value="待分析" />
<el-option label="已审核" value="已审核" />
</el-select>
</el-form-item>
</el-col>
<!-- 检查项目 -->
<el-col :span="4">
<el-form-item label="检查项目" prop="examItemName">
<el-input
v-model="queryParams.examItemName"
placeholder="请输入检查项"
clearable
@keyup.enter="handleQuery"
class="!w-160px"
/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<!-- 检查日期独占一行 -->
<el-col :span="24">
<el-form-item label="检查日期" prop="examDate">
<!-- aaaaa -->
<el-radio-group
ref="examDate_radio"
v-model="examDate_radio_value"
@change="examDate_radio_change"
>
<el-radio style="margin-right: 15px" :value="0">全部</el-radio>
<el-radio style="margin-right: 15px" :value="1">今天</el-radio>
<el-radio style="margin-right: 15px" :value="2">昨天</el-radio>
<el-radio style="margin-right: 15px" :value="3">三天内</el-radio>
<el-radio style="margin-right: 15px" :value="4">一周</el-radio>
<el-radio style="margin-right: 25px" :value="5">
<el-date-picker
ref="examDate_picker"
:disabled="examDate_radio_value === 5 ? false : true"
v-model="queryParams.examDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form-item>
<el-button
@click="handleQuery"
style="
margin-right: 0px;
margin-left: auto;
background-color: rgba(56, 119, 246, 1);
font-size: 14px;
color: rgba(255, 255, 255, 1);
"
><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</ContentWrap>
<ContentWrap style="height: 65px">
<el-form-item>
<!-- <el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['tblist:patientexamlist:create']"
v-if="false"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> -->
<el-button
style="
margin-right: 0px;
margin-left: auto;
background-color: rgb(56, 119, 246);
font-size: 14px;
color: rgb(255, 255, 255);
"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['tblist:patientexamlist:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
@click="dicomDataSync"
style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)"
><Icon icon="ep:refresh" class="mr-5px" /> 同步</el-button
>
<el-button
@click="selectcollect"
style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)"
><Icon icon="ep:search" class="mr-5px" /> 查询收藏</el-button
>
</el-form-item>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@row-dblclick="handleEdit"
:header-cell-style="{ background: 'rgb(235, 241, 250)', height: '56px', color: '#333333' }"
:row-style="{ height: '56px' }"
>
<el-table-column type="index" width="50px" />
<el-table-column label="" width="100px" v-if="false">
<template #default="scope">
<el-image :src="scope.row.thumbnailImgUrl" />
</template>
</el-table-column>
<el-table-column label="主键" align="center" prop="id" v-if="false" />
<el-table-column label="检查项目名称" align="center" prop="examItemName" width="160px" />
<el-table-column label="检查单号" align="center" prop="examId" width="140px" />
<el-table-column label="患者姓名" align="center" prop="pname" />
<el-table-column label="性别" align="center" prop="gender" />
<el-table-column label="出生日期" align="center" prop="birthday" v-if="false" />
<el-table-column
label="检查日期"
align="center"
prop="examDate"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="设备类型" align="center" prop="deviceType" />
<el-table-column label="序列/数量" align="center" prop="seDc" width="100px" />
<el-table-column label="报告状态" align="center" prop="reportstatus" width="100px">
<template #default="scope">
<!-- 使用Flexbox布局将内容垂直排列 -->
<div style="display: flex; flex-direction: column; align-items: center">
<div>
<el-tag :type="scope.row.reportstatus === '已审核' ? 'danger' : 'success'">
<span style="">{{ scope.row.reportstatus }}</span>
</el-tag>
</div>
<!-- 根据highLevelOrgId是否为空判断是否显示"已申请" -->
<div v-if="scope.row.highLevelOrgId">
<el-tag>
<span>已申请</span>
</el-tag>
</div>
</div>
</template>
</el-table-column>
<el-table-column
label="申请日期"
align="center"
prop="applicationDate"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column
label="上传时间"
align="center"
prop="uploadDate"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="机构名称" align="center" prop="orgName" width="180px" />
<el-table-column label="机构ID" align="center" prop="orgId" v-if="false" />
<el-table-column
label="上级判读机构id列表：orgid1,orgid2,orgid3"
align="center"
prop="highLevelOrgId"
v-if="false"
/>
<el-table-column
label="创建时间：年月日时分秒"
align="center"
prop="createDate"
:formatter="dateFormatter"
width="180px"
v-if="false"
/>
<el-table-column label="检查所见" align="center" prop="examDescription" v-if="false" />
<el-table-column label="诊断结论" align="center" prop="diagResults" v-if="false" />
<el-table-column
label="下诊断结论的时间：年月日时分秒"
align="center"
prop="diagDate"
:formatter="dateFormatter"
width="180px"
v-if="false"
/>
<el-table-column label="诊断医生" align="center" prop="diagDoctor" v-if="false" />
<el-table-column label="审核医生" align="center" prop="reviewDoctor" v-if="false" />
<el-table-column
label="审核日期：年月日时分秒"
align="center"
prop="reviewDate"
:formatter="dateFormatter"
width="180px"
v-if="false"
/>
<el-table-column
label="框架需要：创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
v-if="false"
/>
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
link
size="small"
type="primary"
@click="getuporghiorgid(scope.row.id, scope.row.orgId, scope.row.reportstatus)"
v-hasPermi="['tblist:patientexamlist:query']"
style="color: rgb(56, 119, 246)"
>
申请
</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>
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：超声组件 -->
<ECGForm ref="ECG" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter, beginOfDay } from '@/utils/formatTime'
import download from '@/utils/download'
import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
import ECGForm from '/src/views/ECG/ECGForm.vue'
/** PACS检查列表 列表 */
defineOptions({ name: 'PatientexamlistECG' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<PatientexamlistVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
examId: undefined,
pname: undefined,
gender: undefined,
birthday: undefined,
examDate: [] as any[],
deviceType: '',
seDc: undefined,
examItemName: undefined,
reportstatus: '',
applicationDate: [],
uploadDate: [],
orgName: undefined,
orgId: '',
highLevelOrgId: '',
createDate: [],
examDescription: undefined,
diagResults: undefined,
diagDate: [],
diagDoctor: undefined,
reviewDoctor: undefined,
reviewDate: [],
thumbnailImgUrl: undefined,
createTime: [],
isFavourite: ''
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 超声组件 */
const ECG = ref()
const openultrForm = (row:any) => {
ECG.value.open(row)
}
/** 表格行点击 */
const clickNumber = ref(0)
function handleEdit(row) {
console.log(111111121212)
if (row.deviceType.includes('US')) {
//US是超声类
openultrForm(row)
/* clickNumber.value++;
if (clickNumber.value == 2) {
}
clickNumber.value = 0; */
}
}
/** aaaaa **/
const examDate_picker = ref(null)
const examDate_radio = ref(null)
const examDate_radio_value = ref(1)
const examDate_radio_change = () => {
if ([1, 2, 3, 4].includes(examDate_radio_value.value)) {
let timesta = beginOfDay(new Date())
let timeend = beginOfDay(new Date())
timeend.setDate(timeend.getDate() + 1)
//判断当前选择的是那个时间
if (examDate_radio_value.value === 1) {
queryParams.examDate = [nowDate(timesta), nowDate(timeend)]
} else if (examDate_radio_value.value === 2) {
timesta.setDate(timesta.getDate() - 1)
timeend.setDate(timeend.getDate() - 1)
queryParams.examDate = [nowDate(timesta), nowDate(timeend)]
} else if (examDate_radio_value.value === 3) {
timesta.setDate(timesta.getDate() - 2)
queryParams.examDate = [nowDate(timesta), nowDate(timeend)]
} else if (examDate_radio_value.value === 4) {
timesta.setDate(timesta.getDate() - 6)
queryParams.examDate = [nowDate(timesta), nowDate(timeend)]
}
handleQuery()
} else if (5 === examDate_radio_value.value) {
queryParams.examDate = []
} else if (0 === examDate_radio_value.value) {
queryParams.examDate = []
handleQuery()
}
}
///转换时间格式
function nowDate(time) {
var year = time.getFullYear() // 年
var month = (time.getMonth() + 1).toString().padStart(2, '0') // 月
var date = time.getDate().toString().padStart(2, '0') // 日
var hour = time.getHours().toString().padStart(2, '0') // 时
var minute = time.getMinutes().toString().padStart(2, '0') // 分
var second = time.getSeconds().toString().padStart(2, '0') // 秒
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.deviceType = 'US'
const data = await PatientexamlistApi.getPatientexamlistPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
// 只查询收藏的数据
const selectcollect = () => {
queryFormRef.value.resetFields()
queryParams.pageNo = 1
queryParams.deviceType = 'US'
queryParams.isFavourite = '1'
getList()
}
// 收藏功能
const collect = async (id: string, isFavourite: string) => {
if (isFavourite == '0') {
await PatientexamlistApi.CollectAndCancellation(id, '1')
message.success('收藏成功')
} else if (isFavourite == '1') {
await PatientexamlistApi.CollectAndCancellation(id, '0')
message.success('取消成功')
}
examDate_radio_change()
}
const dicomDataSync = async () => {
const data = await PatientexamlistApi.dicomDataSync()
if (data.code == 'success') {
if (data.syncItems == '0') {
message.info('暂无可同步数据')
} else {
queryParams.reportstatus = '待分析'
examDate_radio_value.value = 0
examDate_radio_change()
message.success('数据同步成功')
}
} else {
message.error('数据同步失败')
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
queryParams.isFavourite = ''
queryParams.deviceType = 'US'
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
/** aaaaa **/
//新写法
examDate_radio_value.value = 1
examDate_radio_change()
if (5 === examDate_radio_value.value) handleQuery()
//老写法
//handleQuery();
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 申请后更新上级机构字段*/
const getuporghiorgid = async (id: number, orgId: string, reportstatus: string) => {
try {
await message.confirm('是否要进行申请？', '确认提示')
const data = await PatientexamlistApi.getuporghiid(id, orgId)
if (data == '申请成功') {
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} else {
await message.info(data)
}
} catch {}
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await PatientexamlistApi.deletePatientexamlist(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 申请按钮操作 */
const handleSub = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await PatientexamlistApi.deletePatientexamlist(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await PatientexamlistApi.exportPatientexamlist(queryParams)
download.excel(data, 'PACS检查列表.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
//在初始化的时候查询到当前登陆用户的机构 和上级机构
/** aaaaa **/
//新代码
examDate_radio_change()
if (5 === examDate_radio_value.value) handleQuery()
//老代码
//getList();
})
</script>
<style>
/* 为了防止 el-form-item 的标签文本换行，可以添加以下CSS样式 */
.el-form-item__label {
white-space: nowrap;
}
</style>