mingxue
/
front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script type="text/javascript" async src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/MathJaxFiles/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  <script type="text/javascript" async src="js/globalVariable.js"></script>
  <script type="text/javascript" async src="js/html2canvas.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <title></title>
  <style>
       html,body{
         margin:0;
         padding:0
       }
       .el-radio--medium.is-bordered  {
           height: auto;
           padding-bottom: 8px;
       }
       #title::after {
          display: table;
          content: "";
          clear: both;
      }
  </style>
</head>
<body>
  <div id="app">
      <div style="min-height:300px;">
        <div id="title" style="background:#fff; max-width:1024px">
          <div style=";padding-top:10px;padding-left:10px" >
              <div  style="padding-bottom: 15px"  v-html="data.title" ></div>
              <div  v-for="(itemOpt, idx) in data.options"  :key="idx"  >
                  <el-radio
                    style="margin-bottom: 15px"
                    :label="selectOpt[idx]"
                    border
                    size="medium"  >
                    {{ selectOpt[idx] + ' 、 ' }}<span  style="white-space: normal"   v-html="itemOpt"  ></span>
                    </el-radio>
              </div>
              <div style="height:15px"></div>
             </div>
        </div>
      </div>
        <div style="margin-bottom:20px;padding: 15px;background: rgb(255, 255, 255); max-width: 1024px;" >
          <el-input v-model="questionId" style="width: 150px;" placeholder="请输入题目编号"></el-input>
          <el-button type="primary" :disabled="isAuto" @click="search">搜索</el-button>
          <el-button type="primary" :disabled="isAuto"  @click="upLoad">手动上传</el-button>
          <el-button type="primary" @click="auto">{{isAuto?'暂停':'自动运行'}}</el-button>
        </div>
     <div v-if="imgUri"  style="margin-top:30px;padding: 15px;background: rgb(255, 255, 255);  max-width: 1024px;" >
       图片展示：
       <img :src="imgUri" alt="" crossorigin="anonymous">
     </div>
 </div>


  <script>
var exampleData={
       selectOpt: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
       data:{ },
      time:null,
      domain: '',
      isAuto:false,
      questionId:'',
      imgUri:''
 }
// window.onload = function(){
  new Vue({
     el:'#app',
    data:exampleData,
    created() {
      // if(this.domain == 'localhost:9800'){
        this.domain = 'https://front.mingxuejinbang.com'
      // }
      // this.getData()
    },
     methods: {
       search(){
         if(this.questionId){
            this.getData(this.questionId)
         }else{
           this.$message({
                message: '请输入题目编号',
                type: 'warning'
           });
         }
       },
       auto(){
         this.isAuto=!this.isAuto ;
         if(this.isAuto){
             this.getData()
         }
       },
       upLoad(){
         if(this.questionId && this.imgUri){
           this.uploadQuestionImage(this.imgUri,1)
         }else{
           this.$message({
                message: '请先搜索题目',
                type: 'warning'
           });
         }
       },
       getData(questionId){
        axios.defaults.withCredentials=true;
        let str = ''
        if(questionId){
          str = '?questionId='+questionId
        }
        axios.get(this.domain+'/prod-api/front/questionCollection/getNextQuestionForImageGenerate'+str).then(response => {
         if(response.data.code ==200){
            this.data = response.data.data
            this.$nextTick(() =>{
              this.MathQueueTitle(str)
            })
         }else{
            this.isAuto = false
             this.$message({
                  message: '获取题目信息失败',
                  type: 'warning'
             });
         }
        }).catch(function (error) { // 请求失败处理
           this.isAuto = false
             this.$message.error('网络请求异常！');
        });
       },
       uploadQuestionImage(src,type){
         axios.defaults.withCredentials=true;
         var formData = new FormData()
         formData.append('questionId', this.data.questionId)
         formData.append('imageBase64', src)
         if(this.isAuto == false){
           formData.append('manual', true )
         }
         axios.post(this.domain+'/prod-api/front/questionCollection/uploadQuestionImage',formData).then(response => {
           console.log(response)
          if(response.data.code ==200){
            if(this.isAuto){
               this.getData()
            }
            if(type){
              this.$message({
                   message: '上传题目信息成功！',
                      type: 'success'
              });
            }
          }else{
           this.isAuto = false
            this.$message({
                 message: '上传题目信息失败！',
                 type: 'warning'
            });
          }

         }).catch(function (error) { // 请求失败处理
           this.isAuto = false
             this.$message.error('网络请求异常！');
         });
       },
       getCookie(str){//获取cookie
         let cookie = document.cookie.split('; ') ;
         let cookies = {}
         cookie.forEach(item=>{
         cookies[item.split('=')[0]]=item.split('=')[1]
         })
         return cookies[str]
       },
        MathQueueTitle(str){//初始化公式
           if(MathQueue){
              clearInterval( this.time)
              MathQueue('title')
              setTimeout(()=>{ //
                this.$nextTick(()=>{
                   this.downLoad(str)
                })
              },1000)
           }else{
             this.time = setInterval(()=>{
                 this.MathQueueTitle()
             },5)
           }
        },
        downLoad(type){
          if(!this.data.questionId){
            this.$message({
                 message: '请先搜索题目！',
                 type: 'warning'
            });
            return
          }
          let _this = this
           _this.imgUri = ''
          let canvas2 = document.createElement('canvas')
          let _canvas = document.getElementById('title')
          let w = parseInt(window.getComputedStyle(_canvas).width)
          let h = parseInt(window.getComputedStyle(_canvas).height)
          canvas2.width = w
          canvas2.height = h
          canvas2.style.width = w + 'px'
          canvas2.style.height = h + 'px'
          let context = canvas2.getContext('2d')
          context.scale(1, 1) ///缩放等级
          html2canvas(document.getElementById('title'), {
            canvas: canvas2,
            useCORS: true,
            allowTaint: false
          }).then(function(canvas) {
            let imgUri = canvas.toDataURL('image/jpeg', 2) // 获取生成的图片的url
            _this.imgUri = imgUri
            if(!type){
              _this.uploadQuestionImage(imgUri)
            }
          })
        },

    }
  });
// }

  </script>
</body>
</html>