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