更新了pnpm依赖以及超声增加了查看视频相关功能

This commit is contained in:
lxd 2024-09-05 11:38:08 +08:00
parent 58fb9f6905
commit 9e8d3b6a9a
6 changed files with 718 additions and 6 deletions

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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}&&regId=${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}` })
},
}

View File

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

View File

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

View 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 = () => {
// videocanvas
const video = document.getElementById('videoScreenShot')
const canvas = document.getElementById('myCanvas')
//
const targetWidth = 400 //
const targetHeight = 400 //
// canvas
canvas.width = targetWidth
canvas.height = targetHeight
// canvas2d
const context = canvas.getContext('2d')
// videocanvas
context.drawImage(
video,
0,
0,
video.videoWidth,
video.videoHeight,
0,
0,
targetWidth,
targetHeight
)
// canvasdata URLBase64
const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7) // JPEG01
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>