视频预览

src/views/gptTraining/knowledgeBase/card/index.vue

 <!--  -->
 <template>
-  <div class="cardBox">
-    <el-card class="box-card" v-for="item in dataList" :key="item.knowledgeId">
+
+    <el-card class="box-card" >
       <div class="titleBox">
         <div class="title omit">{{item.knowledgeName}}</div>
         <!-- <div>
@@ -41,8 +41,7 @@
         </div>
       </div>
     </el-card>
-    <div class="box-card-2" v-for="item in 3" :key="item"></div>
-  </div>
+
 </template>
 
 <script>
@@ -53,7 +52,7 @@ export default {
     return {
     };
   },
-  props: ['dataList', 'isPreset', 'refresh'],
+  props: ['item', 'isPreset', 'refresh'],
   components: {},
 
   computed: {
@@ -90,11 +89,11 @@ export default {
       }
     },
     edit (item) {
-      this.$dialog.show('修改模版', editOrAdd, {
+      this.$dialog.show('修改知识库', editOrAdd, {
         area: ['100%', '100%']
       }, { isEdit: true, item: item }).then(res => {
         this.refresh();
-      }).catch(e => { });
+      }).catch(e => { this.refresh(); });
     },
     del (item) {
       this.$confirm('是否确认删除', '提示', {
@@ -140,12 +139,7 @@ export default {
   min-width: 300px;
   background: linear-gradient(to bottom, #e7efff 10%, #fff 50%);
 }
-.box-card-2 {
-  width: calc(100% / 4 - 20px);
-  min-width: 300px;
-  flex-shrink: 0;
-  height: 0;
-}
+
 div /deep/.el-divider--horizontal {
   margin: 14px 0 0 0;
 }
@@ -179,14 +173,7 @@ div /deep/.el-divider--horizontal {
   justify-content: space-between;
   margin-bottom: 16px;
 }
-.cardBox {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
 
-  align-content: flex-start;
-  justify-content: space-between;
-}
 .tagBox {
   margin-bottom: 10px;
 }

src/views/gptTraining/knowledgeBase/index.vue

@@ -17,7 +17,10 @@
           </el-form-item>
         </filter-box>
       </el-form>
-      <card :dataList='myDataSetPage.tableData.impl.dataList' :refresh="refresh"></card>
+      <div class="cardBox">
+        <card v-for="item in myDataSetPage.tableData.impl.dataList" :item="item" :key="item.knowledgeId"  :refresh="refresh"></card>
+    <div class="box-card-2" v-for="item in 3" :key="item"></div>
+  </div>
       <el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;">
         <el-pagination :total="myDataSetPage.tableData.impl.totalCount" :current-page="myDataSetPage.tableData.impl.currentPage" :page-size="myDataSetPage.tableData.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="myDataSetPage.tableData.impl.onCurrentPageChange" @size-change="myDataSetPage.tableData.impl.onPageSizeChange">
         </el-pagination>
@@ -83,14 +86,14 @@ export default {
         area: ['100%', '100%']
       }, { isEdit: false }).then(res => {
         this.refresh();
-      }).catch(e => { });
+      }).catch(e => { this.refresh(); });
     },
     edit (item) {
       this.$dialog.show('修改知识库', editOrAdd, {
         area: ['100%', '100%']
       }, { isEdit: true, item: item }).then(res => {
         this.refresh();
-      }).catch(e => { });
+      }).catch(e => { this.refresh(); });
     },
     del (item) {
       this.$confirm('是否确认删除', '提示', {
@@ -182,4 +185,18 @@ export default {
     margin-bottom: 20px;
   }
 }
+.cardBox {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+
+  align-content: flex-start;
+  justify-content: space-between;
+}
+.box-card-2 {
+  width: calc(100% / 4 - 20px);
+  min-width: 300px;
+  flex-shrink: 0;
+  height: 0;
+}
 </style>

src/views/gptTraining/modelService/testOnline/components/contentView/filePreview/index.vue

 <!-- 文件预览 -->
 <template>
-  <div style="height: calc(100vh - 100px);position: relative;" v-loading.fullscreen.lock="fullscreenLoading" >
-    <div class="down"><a :href="url" >下载文件</a></div>
+  <div style="height: calc(100vh - 100px);position: relative;" v-loading.fullscreen.lock="fullscreenLoading">
+    <div class="down"><a :href="url">下载文件</a></div>
     <div class="image" v-if="['jpg','gif','jpeg','png'].indexOf(fileType)>-1&&url">
       <el-image :src="url"> </el-image>
     </div>
-    <vue-office-docx v-if="['docx','doc'].indexOf(fileType)>-1&&url" :src="url" style="height: 100%;" @rendered="rendered" @error="fullscreenLoading=false"/>
+    <vue-office-docx v-if="['docx','doc'].indexOf(fileType)>-1&&url" :src="url" style="height: 100%;" @rendered="rendered" @error="fullscreenLoading=false" />
     <vue-office-excel v-else-if="['xlsx','xls'].indexOf(fileType)>-1&&url" :src="url" style="height: 100%;" @rendered="rendered" @error="fullscreenLoading=false" />
-    <template v-else-if="['pdf'].indexOf(fileType)>-1&&url" >
-   <div class="pagination" >
-    共{{pageCount}}页
-  <!-- <el-button size="mini" type="primary"  @click="changePdfPage(0)" class="turn" :disabled=" currentPage==1"  >上一页</el-button>
-
-  <el-button size="mini" type="primary"  @click="changePdfPage(1)" class="turn" :disabled="currentPage==pageCount" >下一页</el-button> -->
-  当前第 &nbsp; &nbsp;<el-input-number v-model="currentPage" size="mini" :min="1" ></el-input-number >&nbsp; &nbsp;页
+    <template v-else-if="['pdf'].indexOf(fileType)>-1&&url">
+      <div class="pagination">
+        共{{pageCount}}页 &nbsp; &nbsp; 当前第 &nbsp; &nbsp;<el-input-number v-model="currentPage" size="mini" :min="1"></el-input-number>&nbsp; &nbsp;页
       </div>
-
       <pdf :page="currentPage" :src="url" class="pdf"></pdf>
     </template>
     <div class="txt" v-else-if="['txt'].indexOf(fileType)>-1" v-html="txtContent">
     </div>
+    <div class="video" v-if="['mp4', 'webm', 'ogg', 'ogv'].indexOf(fileType)>-1&&url">
+      <video controls style="width: 100%">
+        <source :src="item" type="video/mp4" />
+        <source :src="item" type="video/ogg" />
+        <source :src="item" type="video/webm" />
+        您的浏览器不支持 video 标签。
+      </video>
+    </div>
 
   </div>
 </template>
@@ -130,42 +133,42 @@ export default {
 
 </script>
 <style scoped>
-.txt{
+.txt {
   height: 100%;
   overflow: auto;
 }
 
-.pagination{
+.pagination {
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-    position: absolute;
-    top: 0px;
-    right: 10px;
+  position: fixed;
+    top: 50px;
+    right: 20px;
   z-index: 10;
 }
-.down{
+.down {
   width: 100%;
 }
-.down a{
-    background-color: #0092FF;
-    color: #FFFFFF;
+.down a {
+    text-decoration: none;
+  background-color: #0092ff;
+  color: #ffffff;
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-    background: #FFFFFF;
-    border: 1px solid #0092FF;
-    border-color: #0092FF;
+  border: 1px solid #0092ff;
+  border-color: #0092ff;
   text-align: center;
   box-sizing: border-box;
   outline: none;
   margin: 0;
-    transition: .1s;
+  transition: 0.1s;
   font-weight: 500;
-    padding: 12px 20px;
-    font-size: 14px;
+  padding: 8px 10px;
+    font-size: 12px;
   border-radius: 4px;
   z-index: 100;
 }

src/views/gptTraining/modelService/testOnline/components/contentView/index.vue

@@ -50,7 +50,7 @@ export default {
             let tagUrl = aTag.getAttribute('href')
             let url;
             // alert(aTag.getAttribute('href'))
-            if (['jpg', 'gif', 'jpeg', 'png', 'docx', 'doc', 'xlsx', 'xls'].indexOf(tagUrl.split('.').pop().toLowerCase()) !== -1) {
+            if (['pdf', 'jpg', 'gif', 'jpeg', 'png', 'docx', 'doc', 'xlsx', 'xls', 'mp4', 'webm', 'ogg', 'ogv'].indexOf(tagUrl.split('.').pop().toLowerCase()) !== -1) {
               // 阻止默认点击事件
               event.preventDefault();