更新了pnpm依赖以及超声增加了查看视频相关功能
This commit is contained in:
parent
58fb9f6905
commit
9e8d3b6a9a
@ -68,7 +68,9 @@
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue-video-player": "^6.0.0",
|
||||
"vue3-print-nb": "^0.1.4",
|
||||
"vue3-video-play": "^1.3.2",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"web-storage-cache": "^1.1.1",
|
||||
"xml-js": "^1.6.11"
|
||||
@ -87,6 +89,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@unocss/eslint-config": "^0.57.4",
|
||||
"@unocss/eslint-plugin": "^0.62.3",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@vitejs/plugin-legacy": "^5.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
|
508
pnpm-lock.yaml
508
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -9,6 +9,13 @@ export interface updateexamineimageVO {
|
||||
deletePerson:string//删除人
|
||||
selected:string//是否选中
|
||||
}
|
||||
export interface insimagescreenshotVO {
|
||||
|
||||
id: string // 主键
|
||||
imagebase: string // 图片
|
||||
|
||||
}
|
||||
|
||||
// 超声组件 API
|
||||
export const ultrasoniccomApi = {
|
||||
// 查询模版表数据
|
||||
@ -33,4 +40,12 @@ export const ultrasoniccomApi = {
|
||||
getdcmlist: async (studyInsta:string,orgid:string,regId:string) => {
|
||||
return await request.get({ url: `/ultrasoniccom/ultrasonic/getdcm?orgID=${orgid}&&studyInsta=${studyInsta}&®Id=${regId}`})
|
||||
},
|
||||
//插入截屏图片
|
||||
insimagescreenshot: async (data:insimagescreenshotVO) => {
|
||||
return await request.post({ url: `/ultrasoniccom/ultrasonic/insimagescreenshot`,data})
|
||||
} ,
|
||||
// 查询图片表视频数据
|
||||
getImageVideo: async (regID:string) => {
|
||||
return await request.get({ url: `/ultrasoniccom/ultrasonic/GetImageVideo?regID=${regID}` })
|
||||
},
|
||||
}
|
||||
|
@ -36,12 +36,12 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import './permission'
|
||||
|
||||
import '@/plugins/tongji' // 百度统计
|
||||
import Logger from '@/utils/Logger'
|
||||
|
||||
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
|
||||
import print from "vue3-print-nb";//打印的
|
||||
import vue3videoPlay from 'vue3-video-play' // 引入组件
|
||||
import 'vue3-video-play/dist/style.css' // 引入css
|
||||
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
// 创建实例
|
||||
@ -65,7 +65,8 @@ const setupAll = async () => {
|
||||
setupAuth(app)
|
||||
|
||||
await router.isReady()
|
||||
|
||||
app.use(vue3videoPlay)
|
||||
|
||||
app.use(VueDOMPurifyHTML)
|
||||
app.use(print);
|
||||
app.mount('#app')
|
||||
|
@ -4,6 +4,7 @@
|
||||
:title="dialogTitle"
|
||||
class="my-custom-close-icon"
|
||||
:fullscreen="true"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<!-- <Dialog :title="dialogTitle" v-model="dialogVisible" class="custom-dialog"> -->
|
||||
<!-- <el-form
|
||||
@ -190,6 +191,7 @@
|
||||
style="width: 100px; height: 100px"
|
||||
:src="selecteimagedone"
|
||||
fit="cover"
|
||||
:close-on-press-escape="false"
|
||||
:preview-src-list="[selecteimagedone]"
|
||||
@load="handleLoad('1')"
|
||||
@error="handleError('1')"
|
||||
@ -215,6 +217,7 @@
|
||||
style="width: 100px; height: 100px"
|
||||
:src="selecteimagedtwo"
|
||||
:preview-src-list="[selecteimagedtwo]"
|
||||
:close-on-press-escape="false"
|
||||
fit="fill"
|
||||
@load="handleLoad('2')"
|
||||
@error="handleError('2')"
|
||||
@ -239,6 +242,7 @@
|
||||
style="width: 100px; height: 100px"
|
||||
:src="selecteimagedthree"
|
||||
:preview-src-list="[selecteimagedthree]"
|
||||
:close-on-press-escape="false"
|
||||
fit="fill"
|
||||
@load="handleLoad('3')"
|
||||
@error="handleError('3')"
|
||||
@ -351,7 +355,7 @@
|
||||
<p>{{ applyFormVO.diagResults }}</p>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 20px; right: 20px">
|
||||
<p>医生签名:{{ Profilevo.username }}</p>
|
||||
<p>医生签名:{{ applyFormVO.diagDoctor }}</p>
|
||||
<!-- <p>时间:xxx</p> -->
|
||||
</div>
|
||||
</div>
|
||||
@ -393,9 +397,18 @@
|
||||
<el-button
|
||||
style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255) ;width: 100%"
|
||||
@click="getimages('')"
|
||||
:disabled="savedisabled"
|
||||
:disabled="savedisabled"
|
||||
>
|
||||
<el-icon style="margin-right: 10px;"><DeleteFilled /></el-icon>图像刷新</el-button
|
||||
>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-button
|
||||
style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255) ;width: 100%"
|
||||
@click="openvideo"
|
||||
|
||||
>
|
||||
<el-icon style="margin-right: 10px;"><VideoCameraFilled/></el-icon>查看视频</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="image-container image-wrapper image-item-container">
|
||||
@ -410,6 +423,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
<!-- </Dialog> -->
|
||||
<!-- 弹窗-->
|
||||
@ -426,6 +440,8 @@
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<videoForm ref="videoformRef"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -440,6 +456,7 @@ import print from 'vue3-print-nb'
|
||||
import htmlToPdf from '@/utils/htmlPdf'
|
||||
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import videoForm from './videoForm.vue'
|
||||
|
||||
/** 超声组件 */
|
||||
defineOptions({ name: 'Ultrasonic' })
|
||||
@ -818,7 +835,7 @@ const selectclear = async () => {
|
||||
}
|
||||
const fordevicemData = ref<any[]>([])
|
||||
|
||||
const formRules = reactive({})
|
||||
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
//阴性阳性
|
||||
@ -920,6 +937,13 @@ const open = async (id: number, orgid: string, regid: string) => {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
// 打开视频
|
||||
const videoformRef=ref()
|
||||
const openvideo=()=>
|
||||
{
|
||||
videoformRef.value.open(regId.value)
|
||||
}
|
||||
|
||||
//查询患者信息 根据ID
|
||||
const getPatientexamlist = async (id: number) => {
|
||||
const data = await PatientexamlistApi.getPatientexamlist(id)
|
||||
|
161
src/views/ultrasoniccom/videoForm.vue
Normal file
161
src/views/ultrasoniccom/videoForm.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<!-- <div class="myArea"> -->
|
||||
<Dialog
|
||||
modal-class="dialog_class"
|
||||
:title="dialogTitle"
|
||||
v-model="dialogVisible"
|
||||
:modal="false"
|
||||
append-to-body
|
||||
style="width: 700px; height: 520px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<div class="mycontainer">
|
||||
<div class="myleft-div">
|
||||
<vue3VideoPlay id="videoScreenShot" crossorigin="anonymous" v-bind="options" />
|
||||
</div>
|
||||
<div class="myright-div">
|
||||
<el-button
|
||||
@click="capture"
|
||||
style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)"
|
||||
><el-icon><PictureFilled /></el-icon> 截图</el-button
|
||||
>
|
||||
|
||||
<canvas id="myCanvas" style="display: none"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ultrasoniccomApi, insimagescreenshotVO } from '@/api/ultrasoniccom'
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
|
||||
const id = ref() //患者ID
|
||||
/** 打开弹窗 */
|
||||
const open = (regId: String) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = ''
|
||||
id.value = regId
|
||||
GetimgUrl()
|
||||
}
|
||||
|
||||
// 播放器配置选项
|
||||
const options = reactive({
|
||||
width: '500px', //播放器高度
|
||||
height: '420px', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: false, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: ['audioTrack', 'speedRate', 'volume'] //显示所有按钮,
|
||||
})
|
||||
// 获取当前患者的视频
|
||||
const GetimgUrl=async ()=>
|
||||
{
|
||||
const data= await ultrasoniccomApi.getImageVideo(id.value)
|
||||
options.src = data
|
||||
}
|
||||
|
||||
//捕获截图
|
||||
const capture = () => {
|
||||
// 获取video和canvas元素
|
||||
const video = document.getElementById('videoScreenShot')
|
||||
const canvas = document.getElementById('myCanvas')
|
||||
|
||||
// 设置目标图片的大小
|
||||
const targetWidth = 400 // 目标宽度
|
||||
const targetHeight = 400 // 目标高度
|
||||
|
||||
// 设置canvas尺寸为目标大小
|
||||
canvas.width = targetWidth
|
||||
canvas.height = targetHeight
|
||||
|
||||
// 获取canvas的2d绘图上下文
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
// 将当前video帧绘制到canvas上,不进行缩放
|
||||
context.drawImage(
|
||||
video,
|
||||
0,
|
||||
0,
|
||||
video.videoWidth,
|
||||
video.videoHeight,
|
||||
0,
|
||||
0,
|
||||
targetWidth,
|
||||
targetHeight
|
||||
)
|
||||
|
||||
// 将canvas内容转换为data URL,即Base64编码的图像
|
||||
const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7) // 第二个参数是JPEG质量参数,范围是0到1
|
||||
|
||||
saveimage(imageDataUrl)
|
||||
// 下载图片
|
||||
// downloadImage(imageDataUrl);
|
||||
}
|
||||
// 保存截图
|
||||
const saveimage = async (imageDataUrl) => {
|
||||
await ultrasoniccomApi.insimagescreenshot({ id: id.value, imagebase: imageDataUrl })
|
||||
message.notifySuccess('请刷新右侧图片')
|
||||
}
|
||||
|
||||
//下载图片
|
||||
const downloadImage = (dataUrl) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = dataUrl
|
||||
const now = new Date()
|
||||
link.download = now.toLocaleString() + '监控视频.JPEG'
|
||||
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
/** 视频组件 */
|
||||
defineOptions({ name: 'VideoForm' })
|
||||
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* .myArea{
|
||||
pointer-events: none;
|
||||
}
|
||||
.myArea :deep(.myVideo) {
|
||||
pointer-events: auto;
|
||||
} */
|
||||
|
||||
.dialog_class {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mycontainer {
|
||||
display: flex; /* 启用 Flexbox */
|
||||
}
|
||||
.myleft-div {
|
||||
width: 80%; /* 左侧 div 宽度 */
|
||||
/* background-color: #f2f2f2; */ /* 背景颜色 */
|
||||
}
|
||||
.myright-div {
|
||||
width: 15%; /* 右侧 div 宽度 */
|
||||
/* background-color: #ddd; */ /* 背景颜色 */
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user