fix: 语音视频分开播放功能提交

src/api/consultation.ts

@@ -183,7 +183,7 @@ export const queryPrimaryDetailInfo = (data?: object) => {
 /** 使用本地视频的形式来做
  */
 export const talkByVideo = (data?: object) => {
-  return http.request("post", "/virtual-patient/ask/talkByVideo", {
+  return http.request("post", "/virtual-patient/ask/talkByVideoAndTts", {
     data
   });
 };

src/api/utils.ts

@@ -20,3 +20,13 @@ export const uploadFile = (data?: object) => {
     { headers: { "Content-Type": "multipart/form-data" } }
   );
 };
+
+export const loadFileBase64 = (data?: object) => {
+  return http.request(
+    "get",
+    "/virtual-patient-manage/fileManage/loadFileBase64",
+    {
+      params: data
+    }
+  );
+};

src/router/modules/digitalHuman.ts

@@ -0,0 +1,22 @@
+export default {
+  path: "/digitalHuman",
+  redirect: "/digitalHuman/index",
+  meta: {
+    title: "数字人",
+    icon: "weixinFavorites",
+    rank: 14
+  },
+  children: [
+    {
+      path: "/digitalHuman/index",
+      name: "DigitalHuman",
+      component: () => import("@/views/digitalHuman/index.vue"),
+      meta: {
+        title: "在线数字人 ",
+        showLink: true,
+        showParent: true,
+        roles: ["admin", "common"]
+      }
+    }
+  ]
+} as RouteConfigsTable;

src/views/consultation/ConsultationRecords/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import titleIcon from "@/assets/newInquiry/title_icon.png";
+</script>
+
+<template>
+  <div class="ConsultationRecords">
+    <div class="main">
+      <div class="evaluate">
+        <div class="header_title">
+          <div class="title">
+            <img :src="titleIcon" alt="" />
+            <span>问诊评价</span>
+          </div>
+        </div>
+      </div>
+      <div class="main_list">111</div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.ConsultationRecords {
+  display: flex;
+  padding: 32px;
+
+  .main {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+
+    .evaluate {
+      width: 441px;
+      background: #fff;
+      border-radius: 6px;
+      box-shadow: 0 0 8px 0 rgb(0 0 0 / 15%);
+    }
+
+    .main_list {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/consultation/Evaluate/InspectHistory.vue

@@ -56,7 +56,7 @@ onMounted(() => {
           :class="[item.answerType === 'patient' ? 'check' : '']"
           class="title"
         >
-          <span class="type">{{ item.commonDic?.nameZh || "一般症状" }}</span>
+          <span class="type">{{ item.commonDic?.nameZh || "系统状态" }}</span>
           <span class="name">{{ item.question }}</span>
           <CheckIcon v-show="item.answerType === 'patient'" class="icon" />
         </div>

src/views/consultation/components/VoiceInspect/FooterInspect.vue

@@ -31,11 +31,15 @@ const suppertDialogRef = ref(null);
 const question = ref("");
 
 const changeType = (val: number) => {
+  if (val === 2) {
+    cardType.value = val;
+  } else {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       cardType.value = val;
     } else {
       message("麦克风不可用", { type: "error" });
     }
+  }
 };
 const sendOption = async () => {
   if (!question.value) {
@@ -73,7 +77,7 @@ const submit = async (val: string) => {
   if (data.type === 3) {
     openSuppertDialog(data);
   }
-  emit("getVideo", data.videoBase64);
+  emit("getVideo", data.voiceBase64);
 };
 // 呼出体格检查弹框
 const openBodyDialog = (item: any) => {

src/views/consultation/components/VoiceInspect/PeopleVideo.vue

@@ -2,38 +2,74 @@
 import { ref } from "vue";
 import { downLoadUrl } from "@/utils/auth";
 import { onMounted } from "vue";
+import { loadFileBase64 } from "@/api/utils";
 
 defineOptions({
   name: "PeopleVideo"
 });
 
 const videoFlag = ref(false);
-const videoUrl = ref("");
 const patientSilentVideo = ref("");
 const status = ref(false);
 const videoPlayer = ref();
-const changeVideo = url => {
+const audioUrl = ref("");
+const patientDummyVideo = ref("");
+const changeVideo = async url => {
+  // if (status.value === false) {
+  //   const myAuto = document.getElementById("myAudio");
+  //   audioUrl.value = `data:audio/mp3;base64, ${url}`;
+  //   await myAuto.load();
+  //   myAuto.play();
+  //   const video = document.createElement("video");
+  //   video.src = downLoadUrl(sessionStorage.getItem("patientDummyVideo"));
+  //   video.controls = false;
+  //   video.autoplay = true;
+  //   video.style.width = "100%";
+  //   video.style.height = "100%";
+  //   video.style.objectFit = "cover";
+  //   video.addEventListener("canplaythrough", () => {
+  //     // 添加到页面的某个元素上
+  //     document.getElementById("video_content").appendChild(video);
+  //     status.value = true;
+  //     videoFlag.value = true;
+  //   });
+  //   video.addEventListener("ended", () => {
+  //     // 视频播放完毕后的操作
+  //     videoFlag.value = false;
+  //     status.value = false;
+  //     video.remove();
+  //   });
+  // } else {
+  //   setTimeout(() => {
+  //     changeVideo(url);
+  //   }, 1000);
+  // }
   if (status.value === false) {
-    videoUrl.value = `data:video/mp4;base64,${url}`;
+    // const no_voice = downLoadUrl(sessionStorage.getItem("patientDummyVideo"));
-
     const video = document.createElement("video");
-    video.src = `data:video/mp4;base64,${url}`;
+    video.src = `data:video/mp4;base64, ${patientDummyVideo.value}`;
     video.controls = false;
     video.autoplay = true;
     video.style.width = "100%";
     video.style.height = "100%";
     video.style.objectFit = "cover";
+    const myAuto = document.getElementById("myAudio");
+    audioUrl.value = `data:audio/mp3;base64, ${url}`;
+    await myAuto.load();
     video.addEventListener("canplaythrough", () => {
       // 添加到页面的某个元素上
       document.getElementById("video_content").appendChild(video);
-      status.value = true;
       videoFlag.value = true;
+      myAuto.play();
+      status.value = true;
     });
-    video.addEventListener("ended", () => {
+
-      // 视频播放完毕后的操作
+    myAuto.addEventListener("ended", function () {
       videoFlag.value = false;
       status.value = false;
       video.remove();
+
+      // 在这里可以执行音频播放完毕后的操作
     });
   } else {
     setTimeout(() => {
@@ -51,9 +87,16 @@ defineExpose({
   }
 });
 
-onMounted(() => {
+onMounted(async () => {
   const id = sessionStorage.getItem("patientSilentVideo");
   patientSilentVideo.value = downLoadUrl(id);
+  patientDummyVideo.value = downLoadUrl(
+    sessionStorage.getItem("patientDummyVideo")
+  );
+  const res: any = await loadFileBase64({
+    fileId: sessionStorage.getItem("patientDummyVideo")
+  });
+  patientDummyVideo.value = res.data;
 });
 // const handleVideoEnded = () => {
 //   // videoFlag.value = false;
@@ -63,7 +106,7 @@ onMounted(() => {
 <template>
   <div class="PeopleVideo">
     <!-- <img v-show="!videoFlag" :src="peopleImg" alt="" /> -->
-
+    <audio :src="audioUrl" id="myAudio" hidden="true" />
     <div class="video_content" id="video_content">
       <video
         v-show="!videoFlag"
@@ -74,6 +117,17 @@ onMounted(() => {
         autoplay
         :controls="false"
       />
+
+      <!-- <transition name="fade">
+        <video
+          v-if="videoFlag"
+          muted
+          loop
+          :src="patientDummyVideo"
+          autoplay
+          :controls="false"
+        />
+      </transition> -->
     </div>
   </div>
 </template>

src/views/consultation/index.vue

@@ -6,6 +6,7 @@ import AssistInspect from "./AssistInspect/index.vue";
 import ConfirmDiagnosis from "./ConfirmDiagnosis/index.vue";
 import ConsultationReview from "./ConsultationReview/index.vue";
 import ConsultationEvaluation from "./ConsultationEvaluation/index.vue";
+import ConsultationRecords from "./ConsultationRecords/index.vue";
 // import Evaluate from "./Evaluate/index.vue";
 import { useConsultationStoreHooks } from "@/store/modules/consultation";
 import KnowledgeGraph from "./KnowledgeGraph/index.vue";
@@ -83,6 +84,15 @@ onMounted(async () => {
           <div class="first_item card_item_img" />
           <span>问诊回顾 </span>
         </div>
+        <div
+          @click="changeIndex(6)"
+          v-if="inspectSatus === '1'"
+          :class="[activedIndex === 6 ? 'actived' : '']"
+          class="card_item"
+        >
+          <div class="record_item card_item_img" />
+          <span>问诊记录</span>
+        </div>
         <div
           v-if="inspectSatus === '0'"
           class="card_item"
@@ -110,6 +120,7 @@ onMounted(async () => {
           <div class="evaluate_item card_item_img" />
           <span>问诊评估</span>
         </div>
+
         <div
           @click="changeIndex(5)"
           v-if="inspectSatus === '2'"
@@ -134,6 +145,7 @@ onMounted(async () => {
         <!-- <Evaluate v-if="activedIndex === 4" /> -->
         <ConsultationEvaluation v-if="activedIndex === 4" />
         <KnowledgeGraph v-if="activedIndex === 5" />
+        <ConsultationRecords v-if="activedIndex === 6" />
       </div>
     </div>
   </div>
@@ -202,6 +214,10 @@ onMounted(async () => {
           background-image: url("../../assets/newInquiry/tab/evaluate.png");
         }
 
+        .record_item {
+          background-image: url("../../assets/newInquiry/tab/record.png");
+        }
+
         .knowledge_graph {
           background-image: url("../../assets/newInquiry/tab/graph.png");
         }
@@ -223,6 +239,10 @@ onMounted(async () => {
           background-image: url("../../assets/newInquiry/tab/act_evaluate.png");
         }
 
+        .record_item {
+          background-image: url("../../assets/newInquiry/tab/act_record.png");
+        }
+
         .confirm_item {
           background-image: url("../../assets/newInquiry/tab/act_confirm_icon.png");
         }

src/views/selectCase/index.vue

@@ -51,6 +51,7 @@ const openCase = async item => {
     createProcess(item);
   }
   sessionStorage.setItem("patientSilentVideo", item.patientSilentVideo);
+  sessionStorage.setItem("patientDummyVideo", item.patientDummyVideo);
   // } else {
   //   message("实例资源占用，请稍后再试", { type: "warning" });
   // }