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

作业批阅：附件预览

This commit is contained in:
白了个白 2024-09-09 15:50:55 +08:00
parent 0c506a09f2
commit 7cb84ffe37
9 changed files with 464 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -34,10 +34,13 @@
"electron-updater": "^6.1.7",
"element-plus": "^2.7.6",
"fabric": "^5.3.0",
"im_electron_sdk": "^8.0.5904",
"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.11",
"@vue-office/pdf": "^2.0.2",
"js-cookie": "^3.0.5",
"jsencrypt": "^3.3.2",
"jsondiffpatch": "0.6.0",
"im_electron_sdk": "^8.0.5904",
"lodash": "^4.17.21",
"pdfjs-dist": "4.4.168",
"pinia": "^2.1.7",

9
src/renderer/src/api/classTask/index.js
View File

@ -39,6 +39,15 @@ export function updateClassworkeval(data) {
})
}
// 修改classworkdata
export function updateClassworkdata(data) {
return request({
url: '/education/classworkdata',
method: 'put',
data: data
})
}

118
src/renderer/src/components/refile-preview/index.vue Normal file
View File

@ -0,0 +1,118 @@
<script setup name="ReFilePreview">
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";
import { defineAsyncComponent, defineProps, onMounted } from "vue";
// import type { FileProps } from "@/components/RefilePreview/types";
import { useHooks } from "@/components/refile-preview/useReadFile";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
// const VueOfficeDocx = defineAsyncComponent(() => import("@vue-office/docx"));
// const VueOfficeExcel = defineAsyncComponent(() => import("@vue-office/excel"));
// const VueOfficePdf = defineAsyncComponent(() => import("@vue-office/pdf"));
// const RePlayer = defineAsyncComponent(
// () => import("@/components/RePlayer/index.vue")
// );
const props = defineProps({
name: {
type: String,
default: ""
},
type: {
type: String,
default: ""
},
fileType: {
type: String,
default: ""
},
raw: () => new File([], ""),
filePath: {
type: String,
default: ""
},
textContent:{
type: String,
default: ""
}
});
const {
excelOptions,
src,
filePreviewRef,
renderedHandler,
errorHandler,
renderTheFile,
isImage,
isVideo,
isText,
isAudio
} = useHooks(props);
onMounted(() => {
renderTheFile(); // 渲染文件
});
defineExpose({
filePreviewRef
});
</script>
<template>
<div ref="filePreviewRef" class="file-preview">
<vue-office-docx
v-if="props.fileType === 'docx' || props.fileType === 'doc'"
:src="props.filePath"
@rendered="renderedHandler"
@error="errorHandler"
/>
<vue-office-excel
v-if="props.fileType === 'xlsx' || props.fileType === 'xls'"
:src="props.filePath"
width="100%"
height="100%"
:auto-resize="true"
:enable-scrollbars="true"
:options="excelOptions"
@rendered="renderedHandler"
@error="errorHandler"
/>
<vue-office-pdf
v-if="props.fileType === 'pdf'"
:src="props.filePath"
@rendered="renderedHandler"
@error="errorHandler"
/>
<el-image
v-if="isImage(props.fileType)"
:preview-teleported="true"
fit="cover"
class="w-[200px] align-left"
:src="props.filePath"
title="点击查看大图"
:preview-src-list="[src]"
/>
<video v-if="isVideo(props.fileType)" :src="props.filePath" style="width: 400px; height: 400px;" controls/>
<div v-if="isText(props.fileType)">
<pre v-html="props.textContent" />
</div>
<audio v-if="isAudio(props.fileType)" :src="props.filePath" controls />
</div>
</template>
<style lang="scss" scoped>
.file-preview {
width: 90%;
height: 60vh;
overflow: auto;
text-align: left;
margin-left: 10px;
}
</style>

7
src/renderer/src/components/refile-preview/types.ts Normal file
View File

@ -0,0 +1,7 @@
export interface FileProps {
id?: number;
type?: string;
fileType?: string;
raw?: File;
filePath?: string;
}

261
src/renderer/src/components/refile-preview/useReadFile.ts Normal file
View File

@ -0,0 +1,261 @@
import type { FileProps } from "@/components/refile-preview/types";
import { onUnmounted, ref } from "vue";
import axios from "axios";
export function useHooks(props: FileProps) {
const excelOptions = {
xls: props.fileType !== "xlsx", //预览xlsx文件设为false；预览xls文件设为true
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
beforeTransformData: workbookData => {
return workbookData;
}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
transformData: workbookData => {
return workbookData;
} //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
};
const src = ref();
const filePreviewRef = ref();
/**
* 渲染完成
*/
const renderedHandler = () => {
console.log("渲染完成");
};
/**
* 渲染失败
* @param e
*/
const errorHandler = e => {
console.log("渲染失败", e);
};
/**
* 渲染文件
*/
async function renderTheFile() {
if (props.type === "local") {
console.log("本地文件" + props.fileType);
isImage(props.fileType) && localImagePreview(props.raw);
isDoc(props.fileType) && localOfficePreview(props.raw);
isText(props.fileType) && localTextPreview(props.raw);
isVideo(props.fileType) && localVideoPreview(props.raw);
isAudio(props.fileType) && localAudioPreview(props.raw);
} else {
if (isVideo(props.fileType)) {
src.value =
import.meta.env.VITE_APP_BASE_URL +
"/upload/attachments/getTeamOfVideo?id=" +
props.id;
return;
}
if (isText(props.fileType)) {
const response = await axios.get(
import.meta.env.VITE_STATIC_URL + props.filePath,
{
responseType: "text"
}
);
src.value = response.data;
return;
}
src.value = import.meta.env.VITE_STATIC_URL + props.filePath;
}
}
/**
* 校验图片类型
* @param type
*/
function isImage(type: string) {
const types = [
"jpg",
"png",
"gif",
"jpeg",
"bmp",
"webp",
"svg",
"tiff",
"tif",
"jpeg",
"jfif",
"pjpeg",
"pjp"
];
return types.includes(type);
}
/**
* 校验文档类型
* @param type
*/
function isDoc(type: string) {
const types = ["docx", "doc", "xlsx", "xls", "pdf"];
return types.includes(type);
}
/**
* 校验文本类型
* @param type
*/
function isText(type: string) {
const types = [
"txt",
"md",
"log",
"json",
"xml",
"html",
"css",
"js",
"java",
"c",
"cpp",
"h",
"hpp",
"py",
"rb",
"go",
"sh",
"bat",
"ps1",
"psm1",
"ps1xml",
"psc1",
"psd1",
"psm1",
"ps1xml",
"psc1",
"psd1",
"ps1xml",
"psc1",
"ps1xml",
"psc1",
"psd1"
];
return types.includes(type);
}
// 检验视频格式
function isVideo(type: string) {
const types = [
"mp4",
"avi",
"rmvb",
"mkv",
"flv",
"wmv",
"mov",
"webm",
"m4v",
"mpg",
"mpeg",
"3gp",
"3g2",
"vob",
"ogv",
"ogg",
"mts",
"m2ts",
"ts",
"m2v",
"mpe",
"mpv",
"m4p",
"m4v",
"mpv2",
"m4v",
"m4p",
"m4v",
"m4p"
];
return types.includes(type);
}
// 检验音频文件
function isAudio(type: string) {
const types = ["mp3", "wav", "ogg", "flac", "aac", "wma", "m4a", "wma"];
return types.includes(type);
}
/**
* 预览本地Office文件
* @param file
*/
function localOfficePreview(file: File) {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = loadEvent => {
const arrayBuffer = loadEvent.target.result;
const blob = new Blob([arrayBuffer], {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
src.value = URL.createObjectURL(blob);
};
}
/**
* 预览本地图片
* @param file
*/
function localImagePreview(file: File) {
const reader = new FileReader();
reader.onload = e => {
src.value = e.target.result;
};
reader.readAsDataURL(file);
}
/**
* 预览本地文本
* @param file
*/
function localTextPreview(file: File) {
const reader = new FileReader();
reader.onload = e => {
src.value = e.target.result;
};
reader.readAsText(file);
}
/**
* 预览本地视频
* @param file
*/
function localVideoPreview(file: File) {
src.value = URL.createObjectURL(file);
}
function localAudioPreview(file: File) {
const reader = new FileReader();
reader.onloadend = () => {
const blob = new Blob([reader.result], { type: "audio/mpeg" });
src.value = URL.createObjectURL(blob);
};
reader.readAsArrayBuffer(file);
}
// 清理工作：当组件卸载时释放URL对象
onUnmounted(() => {
if (src.value) {
isVideo(props.fileType) && URL.revokeObjectURL(src.value);
isAudio(props.fileType) && URL.revokeObjectURL(src.value);
}
});
return {
excelOptions,
src,
filePreviewRef,
isImage,
renderedHandler,
errorHandler,
renderTheFile,
isVideo,
isText,
isAudio
};
}

38
src/renderer/src/views/classTask/classTask.vue
View File

@ -92,7 +92,9 @@ const getData = () => {
// 班级作业数据，包含多个班级
homeworklist({
classidarray: classListIds.value.join(','),
entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？
//entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
edustage: userStore.edustage,// 学段
edusubject: userStore.edusubject,//学科
orderby: 'uniquekey DESC',
pageSize: 100
}).then((response) => {
@ -101,7 +103,7 @@ const getData = () => {
response.rows[i].workdatalist = []
response.rows[i].workdatacount = 0 // 人数
response.rows[i].workdatalistVisible = false
response.rows[i].workdatafeedbackcount = 0
response.rows[i].workdatafeedbackcount = 0 // 已交人数
response.rows[i].feedtimelength = 0
response.rows[i].rightAnswerCount = 0
response.rows[i].scoingRate = 0 + '%' // 得分率
@ -142,10 +144,10 @@ const getData = () => {
}
}
// 显示分配人数>0 的
// 显示分配人数(workdatacount)>0 的
if (response.rows && response.rows.length > 0) {
classWorkList.value =
response.rows && response.rows.filter((item) => item.workdatacount > 0)
classWorkList.value = response.rows && response.rows.filter((item) => item.workdatacount > 0)
// classWorkList.value = response.rows && response.rows.filter((item) => item.workdatacount > 0 && item.uniquekey == '语文-0808-1')
//TODO： 这里没分页，貌似这个 total 不重要，后续看
total.value = response.total
}
@ -211,7 +213,9 @@ const getStudentVisible = async () => {
// 班级作业数据，多个班级
const response = await homeworklist({
classidarray: classListIds.value.join(','),
entpcourseid: '', // 章节？？？这里不需要，全课程的
//entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
edustage: userStore.edustage,// 学段
edusubject: userStore.edusubject,//学科
orderby: 'uniquekey DESC',
pageSize: 100
})
@ -228,7 +232,7 @@ const getStudentVisible = async () => {
// }
// 确保当前拿到的任务与页面中存在的任务能一对一(避免因删除其他操作而删除作业任务导致两个数组的index不统一而越界)
let curWork = curWorkList.find((work) => work.id === classWorkList.value[t].id)
// workdataresultcount 完成人数 workdatacount人数要大于0
// workdataresultcount 完成人数 workdatacount人数要大于0
if (curWork && curWork.workdataresultcount > 0 && classWorkList.value[t].workdatacount > 0) {
classWorkList.value[t].workdataresultcount = curWork.workdataresultcount
// 桌面端貌似不需要进度条了？
@ -236,12 +240,8 @@ const getStudentVisible = async () => {
(classWorkList.value[t].workdataresultcount / classWorkList.value[t].workdatacount) * 100
)
// 计算参与学习任务的平均用时
console.log('平均用时??---', classWorkList.value[t].workdatafeedbackcount)
if (classWorkList.value[t].workdatafeedbackcount > 0) {
classWorkList.value[t].averagetime = (
classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount
).toFixed(0)
console.log('平均用时---', classWorkList.value[t].averagetime)
classWorkList.value[t].averagetime = (classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount).toFixed(0)
} else {
classWorkList.value[t].averagetime = 0
}
@ -257,15 +257,18 @@ const getStudentVisible = async () => {
const getStudentClassWorkData = () => {
// 再查找多个班级里，每个学生的作业数据
console.log('======????????""""""""""')
//TODO 这里id变动，看后续用什么判断
listClassworkdata({
classids: classListIds.value.join(','),
entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？
//entpcourseid: '', // 章节id？ 这里要全课程的作业 不分章节？ 根据学段学科查询所有的作业
edustage: userStore.edustage,// 学段
edusubject: userStore.edusubject,//学科
orderby: "deaddate DESC",
pageSize: 1000
}).then((res) => {
console.log('多个班级里，每个学生的作业数据', res.rows)
for (var t = 0; t < classWorkList.value.length; t++) {
for (var i = 0; i < res.rows.length; i++) {
if (res.rows[i].classworkid == classWorkList.value[t].id) {
if (res.rows[i].uniquekey == classWorkList.value[t].uniquekey) {
// if (res.rows[i].classworkid == classWorkList.value[t].id && res.rows[i].resultcount > 0) {
console.log('==================')
// 有几个学生完成/正在完成学习任务
@ -332,10 +335,7 @@ const getStudentClassWorkData = () => {
// 计算参与学习任务的平均用时
if (classWorkList.value[t].workdatafeedbackcount > 0) {
classWorkList.value[t].averagetime =
(
classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount
).toFixed(0)
classWorkList.value[t].averagetime = (classWorkList.value[t].feedtimelength / classWorkList.value[t].workdatafeedbackcount).toFixed(0)
} else {
classWorkList.value[t].averagetime = 0
}

26
src/renderer/src/views/classTask/container/item-dialog-score.vue
View File

@ -1,6 +1,7 @@
<template>
<el-form ref="classWorkFormScoreRef" :model="classWorkFormScore">
<div class="teacher_content" :style="{ height: dialogProps.maxheight + 'px' }">
<!-- <div class="teacher_content" :style="{ height: dialogProps.maxheight + 'px' }"> -->
<div class="teacher_content" :style="{ height: '75vh' }">
<div style="font-size: 18px; width: 100%; padding: 5px 10px" class="sticky">
{{ classWorkFormScore.name }} 答题详情
</div>
@ -410,11 +411,12 @@
</div>
</div>
<!-- :style="{ height: dialogProps.maxheight + 'px' }" -->
<el-dialog
v-model="fileReadopen"
title="文件预览"
width="80%"
:style="{ height: dialogProps.maxheight + 'px' }"
:style="{ height: '75vh' }"
append-to-body
>
<div class="file-read-dialog">
@ -468,13 +470,13 @@
></span
>
</div>
<!-- <ReFilePreview
<ReFilePreview
:name="fileitem.name"
:type="fileitem.type"
:file-type="fileitem.type"
:file-path="fileitem.url"
:text-content="textContent"
/> -->
/>
</div>
</div>
</el-dialog>
@ -488,12 +490,10 @@ import useUserStore from '@/store/modules/user'
import { ref, reactive } from 'vue'
// import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { updateClassworkeval } from '@/api/classTask'
import { updateClassworkeval, updateClassworkdata } from '@/api/classTask'
import { getTimeDate } from '@/utils/date'
// import ReFilePreview from '@/components/ReFilePreview/index.vue'
import ReFilePreview from '@/components/refile-preview/index.vue'
// import mammoth from 'mammoth'
// import * as XLSX from 'xlsx'
const userStore = useUserStore()
const router = useRouter()
@ -864,6 +864,16 @@ const onSubmit = () => {
return
}
var formd = {
id: dialogProps.value.studentObj.id, // this.activeClassWork.id;
status: '1',//0 未批阅； 1 已批阅
updatedate: getTimeDate,// = year+'-'+month+'-'+day+' '+hh+':'+mm;
};
// 更新作业批改状态
updateClassworkdata(formd).then(res => {
})
// 更新题目批改
classWorkFormScore.teacherRating &&
classWorkFormScore.teacherRating.map((item, index) => {
const queryParams = {

25
src/renderer/src/views/classTask/container/item-dialog.vue
View File

@ -54,12 +54,11 @@
</div>
</template>
<!-- 如果当前学习没有试题 -->
<!-- 如果当前学习没有试题 :height="mainHeight"-->
<div
v-if="classWorkAnalysis.view == 'studentview'"
style="width: 100%"
style="width: 100%; height:75vh; "
class="clwk_dialog_view"
:height="mainHeight"
>
<div class="view_table">
<el-radio-group
@ -75,6 +74,7 @@
v-loading="loading_dt_table"
:data="tableRadio.list"
row-key="id"
style="height: 69vh;"
highlight-current-row
@row-click="getStudentClassWorkDataDetail"
>
@ -491,6 +491,25 @@ const handleClassWorkAnalysissScoreOpen = (row) => {
}
//#endregion
/** 批阅：已交未交事件 */
const tableRadioChange = (e) => {
// 关闭右侧批阅ui
isopen_dtwk_table.value = false;
console.log(e,'??????')
console.log("学生列表：", classWorkAnalysis.classworkdata)
if(e=='1'){
tableRadio.list = classWorkAnalysis.classworkdata.filter(item => item.resultcount > 0)
tableRadio.value = '1';
tableRadio.num0 = classWorkAnalysis.classworkdata.length - tableRadio.list.length;
tableRadio.num1 = tableRadio.list.length;
}else if(e=='0'){
tableRadio.list = classWorkAnalysis.classworkdata.filter(item => item.resultcount == 0)
tableRadio.value = '0';
tableRadio.num0 = tableRadio.list.length;
tableRadio.num1 = classWorkAnalysis.classworkdata.length - tableRadio.list.length;
}
}
// 将标签中的双引号增加转义
const escapeHtmlQuotes = (str) => {
// 后端已replace双引号, 故前端不用在处理

9
src/renderer/src/views/classTask/container/task-item.vue
View File

@ -14,13 +14,16 @@
&nbsp;|&nbsp; 截止时间：{{ item.deaddate }} &nbsp;|&nbsp;{{ tabactive }}
</div>
</div>
<el-switch v-model="value1" active-text="云同步"> </el-switch>
<!-- <el-switch v-model="value1" active-text="云同步"> </el-switch> -->
<div class="class-reserv-item-tool">
<span><span style="color: #000fff; font-weight: 900; font-size: 15px">{{ item.workdataresultcount }}</span>/{{ item.workdatacount }}</span>
<span>
<span v-if="item.workdataresultcount!=0" style="color:#000fff; font-weight: 900; font-size: 15px">{{ item.workdataresultcount }}</span>
<span v-if="item.workdataresultcount==0">{{ item.workdataresultcount }}</span>
/{{ item.workdatacount }}</span>
<span>已交</span>
</div>
<div class="class-reserv-item-tool">
<span style="color: #ff7f00; font-weight: 900; font-size: 15px">2</span>
<span style="color: #ff7f00; font-weight: 900; font-size: 15px">{{ item.teacherRationgCount?item.teacherRationgCount:0 }}</span>
<span>待批阅</span>
</div>
<div class="class-reserv-item-tool">