From fb4908ee1d51f15f2b722707e59d8922916e5270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=9D=A8?= <666>
Date: Wed, 20 Nov 2024 15:04:39 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=AE=9E?=
 =?UTF-8?q?=E9=AA=8C=E5=AE=A4=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/utils/resourceDict.js        |   4 +
 .../views/experiment/components/videoLog.vue  |  25 +++
 src/renderer/src/views/experiment/index.vue   | 195 +++++++++++-------
 .../views/resource/container/resoure-list.vue |   2 +
 4 files changed, 149 insertions(+), 77 deletions(-)
 create mode 100644 src/renderer/src/views/experiment/components/videoLog.vue

diff --git a/src/renderer/src/utils/resourceDict.js b/src/renderer/src/utils/resourceDict.js
index c86aaf8..07d1d44 100644
--- a/src/renderer/src/utils/resourceDict.js
+++ b/src/renderer/src/utils/resourceDict.js
@@ -117,4 +117,8 @@ export const coursewareTypeList = [
     label:'素材',
     value:6
   },
+  {
+    label:'视频',
+    value:12
+  },
 ]
diff --git a/src/renderer/src/views/experiment/components/videoLog.vue b/src/renderer/src/views/experiment/components/videoLog.vue
new file mode 100644
index 0000000..3842f41
--- /dev/null
+++ b/src/renderer/src/views/experiment/components/videoLog.vue
@@ -0,0 +1,25 @@
+<template>
+    <el-dialog v-model="model" class="preview-drawer" :title="row.fileShowName" :modal="true" :destroy-on-close="true" :with-header="false" :append-to-body="true"
+    width="60%">
+    <video style="margin: 0 auto;" :src="row.fileFullPath" controls autoplay></video>
+    </el-dialog>
+</template>
+<script setup>
+const model = defineModel()
+const props = defineProps({
+  row: {
+    type: Object,
+    default(){
+      return {}
+    }
+  },
+})
+
+</script>
+<style scoped>
+.header-close {
+  padding: 0;
+  cursor: pointer;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/experiment/index.vue b/src/renderer/src/views/experiment/index.vue
index 9536210..f33f8ff 100644
--- a/src/renderer/src/views/experiment/index.vue
+++ b/src/renderer/src/views/experiment/index.vue
@@ -1,95 +1,130 @@
 <template>
-    <div class="page-resource flex">
-    <!--左侧 教材 目录-->
+  <div class="page-resource flex">
+    <!-- 左侧 教材 目录 -->
     <experimentBook @node-click="getData"/>
-        <div class="page-right">
-            <!-- 排序 -->
-            <div style="margin-left: 5px;margin-top: 10px;height: 45px;">
-                <el-form size="large">
-                    <el-form-item label="排序:">
-                        <div 
-                        :class="['score-circle', { 'active': active == item.active }]"
-                         v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
-                            <el-text
-                             :style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
-                             size="large">{{ item.title }}</el-text>
-                        </div>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <div class="list-content">
-            <div class="list-container">
-                <div class="content-list" v-for="(item, index) in experimentList" :key="index">
-                    <el-image style="width: 100%;border-radius: 8px;" :src="item.src" :fit="contain" />
-                    <div style="text-align: left;">
-                        <el-text size="large" type="default">{{ item.title }}</el-text>
-                    </div>
-                    <div style="text-align: left;display: flex;align-items: center;">
-                        <el-icon type="info"><View /></el-icon><el-text size="small" type="info">{{ item.nums }}</el-text>
-                    </div>
-                </div>
+    <div class="page-right">
+      <!-- 排序 -->
+      <div style="margin-left: 5px;margin-top: 10px;height: 45px;">
+        <el-form size="large">
+          <el-form-item label="排序:">
+            <div 
+              :class="['score-circle', { 'active': active == item.active }]"
+              v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
+              <el-text
+                :style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
+                size="large">{{ item.title }}</el-text>
             </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="list-content">
+        <div class="list-container">
+          <div class="content-list" v-for="(item, index) in experimentList" :key="index">
+            <!-- 封面 -->
+            <el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
+            <!-- 标题 -->
+            <div style="text-align: left;">
+              <el-text>{{ item.fileShowName }}</el-text>
             </div>
+            <!-- 观看人数 -->
+            <!-- <div style="text-align: left;display: flex;align-items: center;">
+              <el-icon type="info"><View /></el-icon><el-text size="small" type="info">{{ item.nums }}</el-text>
+            </div> -->
+          </div>
         </div>
+        <div class="pagination-box">
+          <el-pagination
+            v-model:current-page="query.pageNum"
+            v-model:page-size="query.pageSize"
+            :page-sizes="[20, 30, 50, 100]"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="resultTotal"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
     </div>
+  </div>
+  <!-- 播放视频 -->
+  <VideoLog v-model="isShow" :row="curRow"></VideoLog>
 </template>
+
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import experimentBook from './components/experimentBook.vue';
 import { View } from '@element-plus/icons-vue'
+import { getSmarttalkPage } from '@/api/file/index'
+import VideoLog from './components/VideoLog.vue'
+
 // 排序列表
 const screenList = ref([
-    {
-        title: '使用最多',
-        active:1,
-    },
-    {
-        title: '最新发布',
-        active:2,
-    }
+  {
+    title: '最新发布',
+    active: 1,
+  }
 ])
 const active = ref(1)
+// 获取视频的总条数
+const resultTotal = ref(0) 
+// 弹出视频
+const isShow = ref(false)
+const curRow = ref({})
+
 // 实验图片结构
-const experimentList = ref([
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-    {
-        title: '123',
-        nums:12,
-        src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-    },
-])
+const experimentList = ref([])
+
+// 请求视频资源的参数
+const query = ref({
+  textbookId: '',
+  fileSource: '平台',
+  // 资源格式  mp3 ppt ...
+  fileSuffix: 'mp4',
+  fileFlags: "'素材'",
+  fileRoot: '资源',
+  fileName: '',
+  orderByColumn: 'uploadTime',
+  isAsc: 'desc',
+  pageNum: 1,
+  pageSize: 20,
+  levelFirstId: 0,
+  levelSecondId: 0
+})
+
 const getData = (data) => {
-    const { textBook, node } = data
-    console.log(textBook,node,'asdsa');
+  const { textBook, node } = data
+  query.value.levelFirstId = node.parentNode.id
+  query.value.levelSecondId = node.id
+  query.value.textbookId = node.rootid
+  getVideoList()
 }
+
 const chooseItem = (item) => {
-    active.value = item.active
+  active.value = item.active
+}
+
+// 获取视频资源
+const getVideoList = async () => {
+  const res = await getSmarttalkPage(query.value)
+  experimentList.value = [...res.rows]
+  resultTotal.value = res.total
+}
+
+const handleSizeChange = (limit) => {
+  query.pageNum = limit
+  getVideoList()
+}
+const handleCurrentChange = (page) => {
+  query.pageSize = page
+  getVideoList()
+}
+const chooseVedio = (item) => {
+  isShow.value = true
+  curRow.value = item
 }
 </script>
+
 <style lang="scss" scoped>
 .page-resource {
   height: 100%;
@@ -116,19 +151,21 @@ const chooseItem = (item) => {
   font-size: 13px;
   padding: 5px 13px;
 }
-.list-content{
+.list-content {
   border-radius: 8px;
   height: 100%;
 }
 .list-container {
   display: flex;
   flex-wrap: wrap;
+  height: 90%;
+  overflow-y: auto;
 }
 
 .content-list {
   border-radius: 8px;
-//   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  width: calc(20%); 
+  //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  width: calc(20%);
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 5px
@@ -136,7 +173,7 @@ const chooseItem = (item) => {
 
 .content-list:hover {
   transform: translateY(-4px);
-//   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  //   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
 }
 
 .item-content {
@@ -162,7 +199,6 @@ const chooseItem = (item) => {
   font-weight: bold;
 }
 
-
 .title-header {
   display: flex;
   justify-content: space-between;
@@ -194,4 +230,9 @@ const chooseItem = (item) => {
   background-color: rgb(218, 236, 255);
   color: white;
 }
+.pagination-box {
+  display: flex;
+  justify-content: center;
+  height: 65px;
+}
 </style>
\ No newline at end of file
diff --git a/src/renderer/src/views/resource/container/resoure-list.vue b/src/renderer/src/views/resource/container/resoure-list.vue
index 517d97f..46e68d0 100644
--- a/src/renderer/src/views/resource/container/resoure-list.vue
+++ b/src/renderer/src/views/resource/container/resoure-list.vue
@@ -190,6 +190,8 @@ const handleRow = (item) => {
   })
   curRow.value = item
   isShow.value = true
+  console.log(item,'item');
+  
 }
 </script>