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

package.json

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

src/api/ultrasoniccom/index.ts

@@ -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}` })
+  },  
 }

src/main.ts

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

src/views/ultrasoniccom/ultrasonicForm.vue

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

src/views/ultrasoniccom/videoForm.vue

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