创新实训-错题上传

<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格式文本并进行过渲染，支持手写识别。可以将上传的题目收藏到错题本