src/renderer/src/utils/resourceDict.js

@@ -117,4 +117,8 @@ export const coursewareTypeList = [
     label:'素材',
     value:6
   },
+  {
+    label:'视频',
+    value:12
+  },
 ]

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>

src/renderer/src/views/experiment/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-resource flex">
-    <!--左侧 教材 目录-->
+    <!-- 左侧 教材 目录 -->
     <experimentBook @node-click="getData"/>
     <div class="page-right">
       <!-- 排序 -->
@@ -20,76 +20,111 @@
       <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" />
+            <!-- 封面 -->
+            <el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
+            <!-- 标题 -->
             <div style="text-align: left;">
-                        <el-text size="large" type="default">{{ item.title }}</el-text>
+              <el-text>{{ item.fileShowName }}</el-text>
             </div>
-                    <div style="text-align: left;display: flex;align-items: center;">
+            <!-- 观看人数 -->
+            <!-- <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>
-        </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,
+    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');
+  query.value.levelFirstId = node.parentNode.id
+  query.value.levelSecondId = node.id
+  query.value.textbookId = node.rootid
+  getVideoList()
 }
+
 const chooseItem = (item) => {
   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,18 +151,20 @@ 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);
+  //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   width: calc(20%);
   cursor: pointer;
   transition: all 0.3s ease;
@@ -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>

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>