zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

add：新增实验室； #411

Merged
yangws merged 1 commits from yangws into main 2024-11-20 15:05:08 +08:00
Conversation 0 Commits 1 Files Changed 4 +149 -77
4 changed files with 149 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/src/utils/resourceDict.js
View File

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

25
src/renderer/src/views/experiment/components/videoLog.vue Normal file
View File

@ -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>

193
src/renderer/src/views/experiment/index.vue
View File

@ -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,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>

2
src/renderer/src/views/resource/container/resoure-list.vue
View File

@ -190,6 +190,8 @@ const handleRow = (item) => {
})
curRow.value = item
isShow.value = true
console.log(item,'item');
}
</script>