add:新增实验室;
This commit is contained in:
parent
fc181559e2
commit
fb4908ee1d
|
@ -117,4 +117,8 @@ export const coursewareTypeList = [
|
||||||
label:'素材',
|
label:'素材',
|
||||||
value:6
|
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,95 +1,130 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-resource flex">
|
<div class="page-resource flex">
|
||||||
<!--左侧 教材 目录-->
|
<!-- 左侧 教材 目录 -->
|
||||||
<experimentBook @node-click="getData"/>
|
<experimentBook @node-click="getData"/>
|
||||||
<div class="page-right">
|
<div class="page-right">
|
||||||
<!-- 排序 -->
|
<!-- 排序 -->
|
||||||
<div style="margin-left: 5px;margin-top: 10px;height: 45px;">
|
<div style="margin-left: 5px;margin-top: 10px;height: 45px;">
|
||||||
<el-form size="large">
|
<el-form size="large">
|
||||||
<el-form-item label="排序:">
|
<el-form-item label="排序:">
|
||||||
<div
|
<div
|
||||||
:class="['score-circle', { 'active': active == item.active }]"
|
:class="['score-circle', { 'active': active == item.active }]"
|
||||||
v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
|
v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
|
||||||
<el-text
|
<el-text
|
||||||
:style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
|
:style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
|
||||||
size="large">{{ item.title }}</el-text>
|
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>
|
</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>
|
||||||
|
<!-- 观看人数 -->
|
||||||
|
<!-- <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>
|
||||||
|
<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>
|
||||||
|
<!-- 播放视频 -->
|
||||||
|
<VideoLog v-model="isShow" :row="curRow"></VideoLog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import experimentBook from './components/experimentBook.vue';
|
import experimentBook from './components/experimentBook.vue';
|
||||||
import { View } from '@element-plus/icons-vue'
|
import { View } from '@element-plus/icons-vue'
|
||||||
|
import { getSmarttalkPage } from '@/api/file/index'
|
||||||
|
import VideoLog from './components/VideoLog.vue'
|
||||||
|
|
||||||
// 排序列表
|
// 排序列表
|
||||||
const screenList = ref([
|
const screenList = ref([
|
||||||
{
|
{
|
||||||
title: '使用最多',
|
title: '最新发布',
|
||||||
active:1,
|
active: 1,
|
||||||
},
|
}
|
||||||
{
|
|
||||||
title: '最新发布',
|
|
||||||
active:2,
|
|
||||||
}
|
|
||||||
])
|
])
|
||||||
const active = ref(1)
|
const active = ref(1)
|
||||||
|
// 获取视频的总条数
|
||||||
|
const resultTotal = ref(0)
|
||||||
|
// 弹出视频
|
||||||
|
const isShow = ref(false)
|
||||||
|
const curRow = ref({})
|
||||||
|
|
||||||
// 实验图片结构
|
// 实验图片结构
|
||||||
const experimentList = ref([
|
const experimentList = ref([])
|
||||||
{
|
|
||||||
title: '123',
|
// 请求视频资源的参数
|
||||||
nums:12,
|
const query = ref({
|
||||||
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
textbookId: '',
|
||||||
},
|
fileSource: '平台',
|
||||||
{
|
// 资源格式 mp3 ppt ...
|
||||||
title: '123',
|
fileSuffix: 'mp4',
|
||||||
nums:12,
|
fileFlags: "'素材'",
|
||||||
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
fileRoot: '资源',
|
||||||
},
|
fileName: '',
|
||||||
{
|
orderByColumn: 'uploadTime',
|
||||||
title: '123',
|
isAsc: 'desc',
|
||||||
nums:12,
|
pageNum: 1,
|
||||||
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
pageSize: 20,
|
||||||
},
|
levelFirstId: 0,
|
||||||
{
|
levelSecondId: 0
|
||||||
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 getData = (data) => {
|
const getData = (data) => {
|
||||||
const { textBook, node } = 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) => {
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page-resource {
|
.page-resource {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -116,19 +151,21 @@ const chooseItem = (item) => {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 5px 13px;
|
padding: 5px 13px;
|
||||||
}
|
}
|
||||||
.list-content{
|
.list-content {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.list-container {
|
.list-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-list {
|
.content-list {
|
||||||
border-radius: 8px;
|
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%);
|
width: calc(20%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
padding: 5px
|
padding: 5px
|
||||||
|
@ -136,7 +173,7 @@ const chooseItem = (item) => {
|
||||||
|
|
||||||
.content-list:hover {
|
.content-list:hover {
|
||||||
transform: translateY(-4px);
|
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 {
|
.item-content {
|
||||||
|
@ -162,7 +199,6 @@ const chooseItem = (item) => {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title-header {
|
.title-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -194,4 +230,9 @@ const chooseItem = (item) => {
|
||||||
background-color: rgb(218, 236, 255);
|
background-color: rgb(218, 236, 255);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
.pagination-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 65px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -190,6 +190,8 @@ const handleRow = (item) => {
|
||||||
})
|
})
|
||||||
curRow.value = item
|
curRow.value = item
|
||||||
isShow.value = true
|
isShow.value = true
|
||||||
|
console.log(item,'item');
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue