add：新增实验室；
This commit is contained in:
小杨
parent
fc181559e2
commit
fb4908ee1d
|
|
@ -117,4 +117,8 @@ export const coursewareTypeList = [
|
|||
label:'素材',
|
||||
value:6
|
||||
},
|
||||
{
|
||||
label:'视频',
|
||||
value:12
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -190,6 +190,8 @@ const handleRow = (item) => {
|
|||
})
|
||||
curRow.value = item
|
||||
isShow.value = true
|
||||
console.log(item,'item');
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue