非dicom阅片添加视频查看

src/views/trials/trials-panel/reading/visit-review/components/StudyList.vue

@@ -1,16 +1,10 @@
 <template>
   <div v-loading="loading" class="study-wrapper">
     <div class="study-info">
-      <div
+      <div v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo" :title="taskInfo.SubjectCode">
-        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
-        :title="taskInfo.SubjectCode"
-      >
         {{ taskInfo.SubjectCode }}
       </div>
-      <div
+      <div v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo" :title="visitTaskInfo.TaskBlindName">
-        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
-        :title="visitTaskInfo.TaskBlindName"
-      >
         {{ visitTaskInfo.TaskBlindName }}
       </div>
     </div>
@@ -18,14 +12,12 @@
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item v-for="(study, index) in studyList" :key="`${study.Id}`" :name="`${study.Id}`">
           <template slot="title">
-            <div
+            <div v-if="!study.IsCriticalSequence" class="dicom-desc">
-              v-if="!study.IsCriticalSequence"
-              class="dicom-desc"
-            >
               <!-- <div v-if="taskInfo && taskInfo.IsShowStudyName">{{ study.StudyName }}</div> -->
               <div style="text-overflow: ellipsis;overflow: hidden;">
                 <span :title="study.CodeView">{{ study.CodeView }}</span>
-                <span v-if="taskInfo && taskInfo.IsShowStudyName" :title="study.StudyName" style="margin-left: 5px;">{{ study.StudyName }}</span>
+                <span v-if="taskInfo && taskInfo.IsShowStudyName" :title="study.StudyName" style="margin-left: 5px;">{{
+                  study.StudyName }}</span>
               </div>
               <div style="text-overflow: ellipsis;overflow: hidden;">
                 <span :title="study.BodyPart">{{ study.BodyPart }}</span>
@@ -38,31 +30,17 @@
             </div>
           </template>
           <div class="file-list-container">
-            <div
+            <div v-for="(k, i) in study.NoneDicomStudyFileList" :key="i" style="position:relative;margin-top:1px;"
-              v-for="(k, i) in study.NoneDicomStudyFileList"
+              @click="selectFile(study, index, i, k)">
-              :key="i"
+              <div :class="{ 'file-active': index === activeStudyIndex && i === activeFileIndex }" class="file-wrapper">
-              style="position:relative;margin-top:1px;"
-              @click="selectFile(study, index, i)"
-            >
-              <div
-                :class="{'file-active': index === activeStudyIndex && i === activeFileIndex}"
-                class="file-wrapper"
-              >
                 <div class="file-image">
                   <el-image
                     v-if="k.FileType === 'image/jpeg' || k.FileType === 'image/jpg' || k.FileType === 'image/bmp' || k.FileType === 'image/png'"
                     style="width: 100%;height: 100%;"
                     :src="`${OSSclientConfig.basePath}${k.Path}?x-oss-process=image/resize,w_50,h_50/format,png`"
-                    fit="contain"
+                    fit="contain" crossorigin="anonymous" />
-                    crossorigin="anonymous"
+                  <el-image v-else-if="k.FileType === 'application/pdf'" style="width: 100%;height: 100%;" :src="pdf"
-                  />
+                    fit="contain" crossorigin="anonymous" />
-                  <el-image
-                    v-else-if="k.FileType === 'application/pdf'"
-                    style="width: 100%;height: 100%;"
-                    :src="pdf"
-                    fit="contain"
-                    crossorigin="anonymous"
-                  />
                 </div>
                 <div class="file-text" :title="k.FileName">
                   {{ k.FileName }}
@@ -117,7 +95,12 @@ export default {
       })
     },
     // 切换文件
-    selectFile(study, studyIndex, fileIndex) {
+    selectFile(study, studyIndex, fileIndex, item) {
+      if (item.FileType.includes('mp4')) return this.$preview({
+        path: item.Path || item.FilePath,
+        type: 'mp4',
+        title: item.FileName,
+      })
       this.activeStudyIndex = studyIndex
       this.activeFileIndex = fileIndex
       const fileList = study.NoneDicomStudyFileList
@@ -152,6 +135,7 @@ export default {
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
+
   .study-info {
     font-size: 16px;
     font-weight: bold;
@@ -162,6 +146,7 @@ export default {
     background-color: #4c4c4c;
     height: 50px;
   }
+
   .dicom-desc {
     font-weight: bold;
     font-size: 13px;
@@ -179,19 +164,23 @@ export default {
     touch-action: auto;
     overflow-y: auto;
   }
+
   .file-active {
     background-color: #607d8b !important;
     border: 1px solid #607d8b !important;
   }
+
   ::v-deep.el-progress__text {
     color: #ccc;
     font-size: 12px;
   }
+
   .file-list-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+
     .file-wrapper {
       width: 100%;
       padding: 5px;
@@ -200,6 +189,7 @@ export default {
       align-items: center;
       cursor: pointer;
       background-color: #3a3a3a;
+
       // color: #ddd;
       // white-space: nowrap;
       // overflow: hidden;
@@ -207,13 +197,16 @@ export default {
       .el-progress__text {
         display: none;
       }
+
       .el-progress-bar {
         padding-right: 0px;
       }
+
       .file-image {
         width: 50px;
         height: 50px;
       }
+
       .file-text {
         flex: 1;
         padding-left: 5px;
@@ -225,17 +218,21 @@ export default {
 
     }
   }
+
   ::v-deep.el-collapse {
     border: none;
+
     .el-collapse-item {
       background-color: #000 !important;
       color: #ddd;
 
     }
+
     .el-collapse-item__content {
       padding-bottom: 0px;
       background-color: #000 !important;
     }
+
     .el-collapse-item__header {
       background-color: #000 !important;
       color: #ddd;
@@ -245,6 +242,7 @@ export default {
       line-height: 20px;
     }
   }
+
   ::v-deep .el-progress-bar__inner {
     transition: width 0s ease;
   }