From eb154a76912d786cc32542877c0560351aa21257 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 04 七月 2024 14:52:05 +0800
Subject: [PATCH] fix:修改教学资源
---
src/views/folder/index.vue | 109 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 62 insertions(+), 47 deletions(-)
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index d0b4d08..8af363c 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -9,27 +9,27 @@
<div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
<div class="card-header flex justify-between items-center shrink-0">
<div class="header-search flex items-center">
- <el-input v-model="searchText" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" :prefix-icon="Search" />
- <el-button type="primary" class="ml-4">鎼滅储</el-button>
+ <el-input v-model="searchText" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" :prefix-icon="Search" maxlength="20" />
+ <el-button type="primary" class="ml-4" @click="searchFile">鎼滅储</el-button>
</div>
</div>
<div class="card-main flex-1 my-5 relative">
<div class="main-content absolute top-0 bottom-0 left-0 right-0">
- <el-table :data="fileList" height="100%">
+ <el-table :data="fileList" height="100%" v-loading="loading">
<el-table-column label="鏂囦欢鍚嶇О">
<template #default="scope">
<div class="row-info">
<div class="icon">
- <img :src="fileType[scope.row.type].iconPath" class="width-img" />
+ <img :src="getIcon(scope.row.contentType)" class="width-img" />
</div>
- <div class="label">{{ scope.row.name }}</div>
+ <div class="label">{{ scope.row.introduction }}</div>
</div>
</template>
</el-table-column>
- <el-table-column prop="class" label="鐝骇" align="center" />
- <el-table-column prop="subject" label="绉戠洰" align="center" />
- <el-table-column prop="date" label="涓婁紶鏃堕棿" align="center" />
+ <el-table-column prop="className" label="鐝骇" align="center" />
+ <el-table-column prop="typeName" label="绉戠洰" align="center" />
+ <el-table-column prop="updateTime" label="涓婁紶鏃堕棿" align="center" />
<el-table-column>
<template #default="scope">
<el-button link type="primary" @click.prevent="checkRow(scope.row)">
@@ -42,7 +42,11 @@
</div>
<div class="card-footer flex justify-center mb-7 shrink-0">
- <el-pagination background layout="prev, pager, next" :total="1000" />
+ <el-pagination background layout="prev, pager, next" :total="fileList.length"
+ :default-page-size="20"
+ :currentPage="currentIndex"
+ :hide-on-single-page="true"
+ @current-change="handleCurrentChange" />
</div>
</div>
</el-card>
@@ -52,7 +56,7 @@
<!-- pdf鏌ョ湅 -->
<div class="pdf-container" v-show="pdfViewer">
- <PDFViewer :pdfUrl="'/test.pdf'"></PDFViewer>
+ <PDFViewer :pdfUrl="pdfFile"></PDFViewer>
<div class="close-btn">
<el-button type="danger" size="large" circle @click="closeViewer">
<template #icon>
@@ -78,7 +82,7 @@
</template>
<script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
import { storeToRefs } from 'pinia';
import { Close } from '@element-plus/icons-vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
@@ -96,6 +100,8 @@
heartBeatData: 'ping'
});
+const time = ref(null);
+
const fileType = {
'img': {
@@ -103,14 +109,15 @@
handle: (item) => {
console.log(item);
imageViewer.value = true;
- sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
+ imageList.value = [item.contentUrl.url];
+ resendMessage();
}
},
'video': {
iconPath: '/static/icons/file_type_video.png',
handle: (item) => {
console.log(item);
- sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
+ resendMessage();
}
},
'pdf': {
@@ -118,7 +125,8 @@
handle: (item) => {
console.log(item);
pdfViewer.value = true;
- sendMessage({ id: userInfo.value.id, command: 'startRecordTime' });
+ pdfFile.value = item.contentUrl.url;
+ resendMessage();
}
},
};
@@ -131,62 +139,69 @@
const videoViewer = ref(false);
const imageList = ref([]);
+const pdfFile = ref('');
-const fileList = ref([
- {
- id: 1,
- name: '娴嬭瘯娴嬭瘯娴嬭瘯',
- url: '/test_question.png',
- date: '2024-12-12',
- class: 'test',
- subject: '娴嬭瘯',
- type: 'img'
- },
- {
- id: 2,
- name: '娴嬭瘯娴嬭瘯娴嬭瘯',
- url: '',
- date: '2024-12-12',
- class: 'test',
- subject: '娴嬭瘯',
- type: 'video'
- },
- {
- id: 3,
- name: '娴嬭瘯娴嬭瘯娴嬭瘯',
- url: '/test.pdf',
- date: '2024-12-12',
- class: 'test',
- subject: '娴嬭瘯',
- type: 'pdf'
- }
-]);
+const fileList = ref([]);
+
+const currentIndex = ref(1);
const checkRow = (item) => {
- fileType[item.type] && fileType[item.type].handle(item);
-
+ fileType[item.contentType] && fileType[item.contentType].handle(item);
};
const closeViewer = () => {
pdfViewer.value = false;
imageViewer.value = false;
videoViewer.value = false;
- sendMessage({ id: userInfo.value.id, command: 'endRecordTime' });
+ clearInterval(time.value);
};
const getData = () => {
+ loading.value = true;
getFileList().then(res => {
-
+ loading.value = false;
+ fileList.value = res.data;
+ }).catch(() => {
+ loading.value = false;
});
};
getData();
+
+const resendMessage = () => {
+ if (time.value) {
+ clearInterval(time.value);
+ }
+ sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' });
+ time.value = setInterval(() => {
+ sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' });
+ }, 5000);
+};
+
+const getIcon = (type) => {
+ if (fileType[type]) {
+ return fileType[type].iconPath;
+ }
+};
+
+const handleCurrentChange = (val) => {
+ getData();
+}
+
+
+const searchFile = () => {
+ getData();
+}
// -----------------------------------鐢熷懡鍛ㄦ湡
onMounted(() => {
// 杩炴帴webscoket
connect();
});
+
+onBeforeUnmount(() => {
+ clearInterval(time.value);
+});
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0