<template>
<div class="chatHome">
<div class="chatLeft">
<div class="title">
<br />
<br />
<h1>错题上传</h1>
</div>
<div class="online-person">
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
<div v-if="!isupload" class="add-butt" @click="add_file"><i class="el-icon-document" style="font-size: 28px;"></i>
</div>
<div v-else class="add-butt"><i class="el-icon-loading"></i></div>
</div>
<div class="online-person">
<input type="file" ref="fileInput2" style="display: none" @change="handleFileChange2">
<div v-if="!isupload2" class="add-butt" @click="add_file2"><i class="el-icon-document-checked
" style="font-size: 28px;"></i>
</div>
<div v-else class="add-butt"><i class="el-icon-loading"></i></div>
</div>
<div class="online-person">
<div class="add-butt"><i class="el-icon-star-off" style="font-size: 28px;" @click="save"></i></div>
</div>
</div>
<div class="chatRight">
<!-- <div class="box">
<textBox text="The equation is \\( E = mc^2 \\)." />
<textBox text="The equation is \\( E = mc^2 \\)." />
</div> -->
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" placeholder="上传题目,支持手写" v-model="text">
</el-input>
<div class="white">
<textBox :text=text />
</div>
<br>
<div style="margin: 20px 0;"></div>
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" placeholder="上传题解,支持手写" v-model="ans"></el-input>
<div class="white">
<textBox :text=ans />
</div>
</div>
</div>
</template>
<script>
import { generateUUID } from "@/util/util.js"
import { upload_pic, delete_rag_chat } from "@/api/getData";
import textBox from '@/components/FomulaText.vue'
export default {
name: "App",
components: {
textBox
},
data() {
return {
pcCurrent: "",
personList: [],
showChatWindow: false,
chatWindowInfo: {},
isupload: false,
isupload2: false,
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
text: '',
ans: '',
tag: ''
};
},
mounted() {
if (localStorage.getItem("chats") != null) {
let chats = JSON.parse(localStorage.getItem("chats"));
for (let i = 0; i < chats.length; i++) {
if (chats[i].type == 1) {
this.personList.push(chats[i]);
}
}
}
// getFriend().then((res) => {
// console.log(res);
// this.personList = res;
// });
},
methods: {
save() {
console.log("hehihaha");
this.$prompt('请输入题目类型', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
this.tag = value;
if (localStorage.getItem("review_collection") != null) {
let review_collection = JSON.parse(localStorage.getItem("review_collection"));
let text = this.text;
let ans = this.ans;
let tag=this.tag;
let p = { "text": text, "ans": ans, "tag": tag }
review_collection.push(p)
localStorage.setItem("review_collection", JSON.stringify(review_collection))
} else {
let review_collection = [];
let text = this.text;
let ans = this.ans;
let tag=this.tag;
let p = { "text": text, "ans": ans, "tag": tag }
review_collection.push(p)
localStorage.setItem("review_collection", JSON.stringify(review_collection))
};
this.$message({
type: 'success',
message: '已收藏:' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消收藏'
});
});
},
add_file() {
this.$refs.fileInput.click();
// this.personList.push(this.personList[0])
// this.personList.push(new_chat)
// localStorage.setItem("chats", JSON.stringify(this.personList));
},
add_file2() {
this.$refs.fileInput2.click();
// this.personList.push(this.personList[0])
// this.personList.push(new_chat)
// localStorage.setItem("chats", JSON.stringify(this.personList));
},
handleFileChange(event) {
const file = event.target.files[0];
if (!file) return;
const fileName = file.name.toLowerCase();
if (fileName.endsWith('.jpg') || fileName.endsWith('.png')) {
const maxSizeMB = 3;
const maxSizeBytes = maxSizeMB * 1024 * 1024;
if (file.size > maxSizeBytes) {
this.$message(`文件大小超过 ${maxSizeMB} MB,请选择小于 ${maxSizeMB} MB 的文件`);
return;
}
this.isupload = true;
let fileType;
if (fileName.endsWith('.jpg')) {
fileType = 'jpg';
} else if (fileName.endsWith('.png')) {
fileType = 'png';
}
let user_ID = localStorage.getItem("AIEDU_ID");
let count = parseInt(localStorage.getItem("count"))
upload_pic({ file, type: fileType, userID: user_ID, count: count }).then((res) => {
if (res.msg == "ok") {
// localStorage.setItem("count", count + 1)
this.$data.text = res.data;
console.log(this.$data.text);
this.$message("ok");
this.isupload = false;
return;
} else {
}
});
} else {
// 提示用户选择支持的文件类型
this.$message("请选择jpg或png");
}
},
handleFileChange2(event) {
console.log("函数2被调用了");
const file = event.target.files[0];
if (!file) return;
const fileName = file.name.toLowerCase();
if (fileName.endsWith('.jpg') || fileName.endsWith('.png')) {
const maxSizeMB = 3;
const maxSizeBytes = maxSizeMB * 1024 * 1024;
if (file.size > maxSizeBytes) {
this.$message(`文件大小超过 ${maxSizeMB} MB,请选择小于 ${maxSizeMB} MB 的文件`);
return;
}
this.isupload2 = true;
let fileType;
if (fileName.endsWith('.jpg')) {
fileType = 'jpg';
} else if (fileName.endsWith('.png')) {
fileType = 'png';
}
let user_ID = localStorage.getItem("AIEDU_ID");
let count = parseInt(localStorage.getItem("count"))
upload_pic({ file, type: fileType, userID: user_ID, count: count }).then((res) => {
if (res.msg == "ok") {
// localStorage.setItem("count", count + 1)
this.$data.ans = res.data;
console.log(this.$data.text);
this.$message("ok");
this.isupload2 = false;
return;
} else {
}
});
} else {
// 提示用户选择支持的文件类型
this.$message("请选择jpg或png");
}
},
},
};
</script>
<style lang="scss" scoped>
.white {
color: white
}
.box {
height: 600px;
width: 500px;
margin: auto;
/* 居中显示 */
display: grid;
grid-auto-flow: column;
/* 设置自动流为纵向排列 */
/* 使用flex布局 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
.chatHome {
// margin-top: 20px;
display: flex;
.chatLeft {
width: 190px;
.title {
color: #fff;
padding-left: 10px;
}
.online-person {
margin-top: 60px;
.onlin-text {
padding-left: 10px;
color: rgb(176, 178, 189);
}
.add-butt {
width: 100px;
height: 20px;
border-radius: 10px;
background-color: rgb(50, 54, 68);
position: relative;
text-align: center;
padding: 7px 0px 12px 0;
margin: 5px 5px;
cursor: pointer;
color: #fff;
&:hover {
background-color: #1d90f5;
}
}
.person-cards-wrapper {
padding-left: 10px;
height: 53.5vh;
margin-top: 20px;
overflow: hidden;
border-radius: 10px;
background-color: rgb(50, 54, 68);
// border: 1px solid #5d5c5c;
overflow-y: scroll;
box-sizing: border-box;
&::-webkit-scrollbar {
width: 0;
/* Safari,Chrome 隐藏滚动条 */
height: 0;
/* Safari,Chrome 隐藏滚动条 */
display: none;
/* 移动端、pad 上Safari,Chrome,隐藏滚动条 */
}
}
}
}
.chatRight {
width: 70%;
/* 宽度减去左右各20px的边距 */
height: 400px;
/* 高度减去上下各20px的边距 */
background-color: rgb(39, 42, 55);
/* 灰色背景 */
//border: 1px solid #070707;
/* 灰色边框 */
margin: auto;
/* 居中显示 */
display: grid;
/* 使用flex布局 */
//justify-content: center;
/* 水平居中 */
//align-items: center;
/* 垂直居中 */
}
}
.el-input__inner{
font-size:20px !important;
background-color: #18181c !important;
}
</style>
错题上传页面,上传题干和题解,后端将图片识别为latex格式文本并进行过渲染,支持手写识别。可以将上传的题目收藏到错题本