AI_Student_Client/src/components/gpsren.vue

<template>
    <div> 
        <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm" label-position="top">

            <el-col :span="24">
                <el-form-item label="G（目标导向）:" class="cust-label">
                    <div v-html="question.gOriented" style="font-weight: 700;font-size: 16px;"></div>
                </el-form-item>
            </el-col>

            <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
                <el-step>
                    <div slot="title" style="border-radius: 10px;">
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <span>P</span>
                            <span>（问题定义）</span>
                        </div>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title" style="border-radius: 10px;">
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <span>S</span>
                            <span>（系统拆解）</span>
                        </div>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title" style="border-radius: 10px;">
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <span>R</span>
                            <span>（结果整合）</span>
                        </div>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title" style="border-radius: 10px;">
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <span>E</span>
                            <span>（结果评估）</span>
                        </div>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title" style="border-radius: 10px;">
                        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <span>N</span>
                            <span>（总结新知识）</span>
                        </div>
                    </div>
                </el-step>
            </el-steps>
            <!-- <div>
            <el-button icon="el-icon-discover" size="small" type="success">AI助手</el-button>
          </div> -->
            <br />
            <el-col :span="24" >
                <div  class="test-area" v-if="active==0">
                    <el-form-item class="test-form cust-label">

                        <el-input type="textarea" class="custom-height" v-model="form.p" :placeholder="stepmodel.P"></el-input>
                    </el-form-item>
                    <div class="test-form ai-evaluate">
                        <div v-if="showAIEvaluate"><i class="el-icon-loading"></i></div>
                        <div v-else >
                          <p v-html="resp"></p>   
                        </div>
                    </div>
                </div>

                <div  class="test-area" v-if="active==1">
                     <el-form-item class="test-form cust-label">
                    <el-input type="textarea" class="custom-height" v-model="form.s" :placeholder="stepmodel.S"></el-input>
                </el-form-item>
                    <div class="test-form ai-evaluate">
                        <div v-if="showAIEvaluate"><i class="el-icon-loading"></i></div>
                        <div v-else >
                          <p v-html="resp"></p>   
                        </div>
                    </div>
                </div>

                <div  class="test-area" v-if="active==2">
                    <el-form-item class="test-form cust-label">
                    <el-input type="textarea" class="custom-height" v-model="form.r" :placeholder="stepmodel.R"></el-input>
                </el-form-item>
                    <div class="test-form ai-evaluate">
                         <div v-if="showAIEvaluate"><i class="el-icon-loading"></i></div>
                        <div v-else >
                          <p v-html="resp"></p>   
                        </div>
                    </div>
                </div>

                <div  class="test-area" v-if="active==3">
                    <el-form-item class="test-form cust-label">
                    <el-input type="textarea" class="custom-height" v-model="form.e" :placeholder="stepmodel.E"></el-input>
                </el-form-item>
                    <div class="test-form ai-evaluate">
                         <div v-if="showAIEvaluate"><i class="el-icon-loading"></i></div>
                        <div v-else >
                          <p v-html="resp"></p>   
                        </div>
                    </div>
                </div>

                <div  class="test-area" v-if="active==4">
                      <el-form-item class="test-form cust-label" style="width:100%;">
                    <el-input type="textarea" class="custom-height" v-model="form.n" :placeholder="stepmodel.N"></el-input>
                </el-form-item>
                    <!-- <div class="test-form ai-evaluate">
                         <div v-if="showAIEvaluate"><i class="el-icon-loading"></i></div>
                        <div v-else >
                          <p v-html="resp"></p>   
                        </div>
                    </div> -->
                </div>

                <div class="opt-area" v-if="active <4">
                    <div class="opt-left">
                        <el-button :disabled="showAIEvaluate" :icon="showAIEvaluate?'el-icon-loading':'el-icon-arrow-right'" style="width: 100%;" size="small" type="primary" plain  @click="onAIEvaluate">提交AI测评</el-button>
                    </div>
                     <div class="opt-left">
                        <el-button  :disabled="showAIEvaluate" icon="el-icon-check" v-if="active<4" style="width: 100%;" size="small" type="success" plain  @click="onNext">下一步</el-button>
                    </div>
                </div>
                <div v-else  class="opt-area" >
                 <el-button  :disabled="showAIEvaluate" icon="el-icon-check" style="width: 100%;" size="small" type="success" plain  @click="onFinish">完成</el-button>
                </div>
            </el-col> 
             
        </el-form>



        <!-- <template>
            <el-dialog :visible.sync="dialogResultVisible" width="50%" top="0" custom-class="GPSREN" :modal="false"
              :modal-append-to-body="false">
                <div slot="title" class="cust-title">
                    AI评价 <i :class="aiTestClass"></i>
                </div>

                <div class="block">
                    <div v-html="resp"></div>
                </div>

                <span slot="footer" class="dialog-footer" v-if="aiTestClass=='el-icon-reading'">
                    <el-button icon="el-icon-arrow-right" size="small" type="primary" plain v-if="active<4"
                        @click="()=>{active++;dialogResultVisible = false;}">AI评测</el-button>
                    <el-button type="primary" @click="()=>{dialogResultVisible = false;dialogVisible = false}"
                        size="small" v-else-if="active==4">提交</el-button>
                    <el-button @click="dialogResultVisible = false" size="small">修改</el-button>
                    <el-button @click="()=>{dialogResultVisible = false; active=0;}" size="small">重新答题</el-button>
                </span>
            </el-dialog>
        </template> -->
    </div>
</template>

<script>
import Axios from 'axios';
import { getDictValueByType } from '../api/dict'

import { mockAI, steps ,tips} from '../mock/gpsren';

import {askAI,postGPSREN,getStepModel} from '../api/ai' 
let thisPage = null

let stepMapToCnt = {}

export default {
    name: 'gpsren-info',
    props: {
        question:Object,
        finish:Function
    },
 
    data() {
        return {
            headers: {
                Authorization: this.$store.state.user.token,
                Platform: 'educationStudent'
            },
            id: '',
            showAIEvaluate:false,
            openAnswerFlag: false,
            sumSource: 0,
            score:0,
            dialogImageUrl: '',
            questionTypeList: [],
            fileUrl: this.$store.state.common.fileHost,
            dialogAnswerImgVisible: false,
            uploadAction: this.$httpApi.httpUrl('/api/upload/2'),
            dialogVisible: false,
            form: {},
            saveForm:{},
            config: {
                zIndex: 0
            },
            active: 0,
            dialogResultVisible: false,
            aiTestItem: [],
            aiTestClass: "el-icon-reading",
            resp:'',
            stepmodel: {
                        "P": "",
                        "S":"",
                        "R":"",
                        "E":""
                        },
            stepscore: {
                        "P": 0,
                        "S":0,
                        "R":0,
                        "E":0
                        },
        }
    },

    beforeCreate() {
        thisPage = this
    },

    mounted() {
         const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$nextTick(()=>{ 
            this.stepmodel = {
                "P":"",
                "S":"",
                "R":"",
                "E":""
                }
            console.log("this.stepmodel===> ",this.stepmodel)
            
            //todo
             getStepModel().then(resp=>{
                console.log(resp)
                if(resp.status == 200) {
                    let res = resp.data
                    if(res.code == 1) {
                        
                         let stepModels = res.data.dataList
                         for(let n =0 ;n<stepModels.length;n++) {
                            let m = stepModels[n]
                            this.stepmodel[m.name] = m.requires
                            this.stepscore[m.name] = m.score
                         }
                    }
                }
             }).finally(d=>{
                console.log("this.stepmodel",this.stepmodel)
                loading.close()
             })
        })
      
    },


    methods: {

        //提交测评
        onAIEvaluate() {
            let step = steps[this.active] 
            if(!!!this.form[`${step.toLowerCase()}`]) {
                //没有学生答案
                this.$message({
                        type: 'warning',
                        message: '请输入答案',
                        duration: 1000
                })
                return
            }
            this.showAIEvaluate = true
            let run = () => { 
               return  this.remoteAskAI(this.$props.question.courseName ,
                step,
                this.$props.question.gOriented,
                this.$props.question[`${step.toLowerCase()}ScoreStd`] + ' '+ this.stepmodel[step],
                this.form[`${step.toLowerCase()}`],
                this.stepscore[step]
             )
            }
            run().finally(f=>{ this.showAIEvaluate = false; })
        },

        //
        remoteAskAI(cn, sn, g,sa,ssa,_s) {
            console.log(cn,sn,g,sa,ssa)
            this.resp = ''
            return askAI({
                memoryId:1,
                courseName:cn,
                stepName:sn,
                goal:g,
                standardAnswer:sa,
                studentAnswer:ssa,
                score:_s
            }).then(r=>{
                if(r.status == 200) {
                    let res = r.data
                    if(res.code == 1) {
                        console.log(res.data)
                        try{
                            let jData = JSON.parse(res.data)
                            this.resp = jData.text
                            this.score = jData.score 
                        }catch(e){
                            console.log(e)
                            this.resp = "AI返回值不符合格式要求"
                        }
                    } else {
                        this.resp = res.message
                    }
                } else {
                    this.resp = "AI超时"
                }
              
                return this.resp
            }).catch(c=>{
                this.resp = "服务故障，请重试"
            }).finally(()=>{
                //记录本地
                this.saveForm[`${sn.toLowerCase()}Answer`] = ssa
                this.saveForm[`${sn.toLowerCase()}Score`] = this.score
            })
        },

        onNext() { 
            //保存答案
            let step = steps[this.active]

            let a = this.saveForm[`${step.toLowerCase()}Answer`]
           
            if(!!!a) {
                this.$message({
                    type:"error",
                    message:`请填写${step}部分，并先经过AI测评`,
                    duration:1000
                })
                return
            }
 
            //进入到下一个步骤
            this.active ++ 

            this.resp = ''
            this.showAIEvaluate = false
            this.score = 0

        },

        onFinish() {
            //保存
             
             let params = { 
                goalInfoId: this.$props.question.id,
                nAnswer:this.form.n
             }
             let p = Object.assign(params,this.saveForm)
              
             postGPSREN(p).then(d=>{
                console.log("postGPSREN",d)
                if(d.status == 200) {
                  let dt =  d.data || {}
                  if(dt.code == 1) {
                   this.$props.finish && this.$props.finish()
                  }
                }
             }) 
            
        },
  
    },

    filters: {
       getStepModelTips(s) {
            let cs = this.stepmodel[s]
            console.log("dddd==>",cs)
            if(!!cs) {
               return  cs['requires'] || ""
            } 
            return ""
        },
    }, 
        
}
</script>

<style lang="scss">
.el-dialog__header {
    background-color: #477efa !important;
    color: aliceblue !important;
}

.el-dialog__close {
    color: aliceblue !important;
}

.GPSREN {
    margin-bottom: 0px !important;

    .cust-title {
        text-align: center;
        font-size: 20px;
    }

    .test-area{

        display: flex;
        align-items:flex-start;
        justify-content: space-between;
        gap: 10px;
        height: 350px;

        .test-form{
          width:50%;
        }

        .ai-evaluate{
            color:#333;
            background-color: #eee;
            border: solid 1px #eee;
            height: calc(100%);
            overflow: auto;
        }
    }

    .cust-label {
        font-weight: bold;

        .el-form-item__label {
            color: #67C23A !important;
        }

    }

    .custom-height .el-textarea__inner {
        height: 350px;
        /* 设置你想要的高度 */
    }

    .opt-area{
        // background-color: #67C23A;
        color:#eee;
        display: flex;
        align-items:center;
        justify-content: space-between;
        gap: 10px;

        .opt-left{
            width: 50%;
            height: 100%;
        }
    }
}

.testbox p {
    display: inline-block;
}


/*.el-upload--picture-card {*/
/*  width: 100px !important;*/
/*  height: 90px !important;*/
/*  line-height: 100px !important;*/
/*  vertical-align: top;*/
/*}*/
.tops {
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    background-color: #FAD303;
    box-shadow: 3px 2px 0 0 rgba(250, 213, 3, 0.445);
}

.el-pagination {
    margin-top: 15px;
    text-align: center;
}

.title3 .count {
    position: relative;
    overflow: overlay;
    display: inline-block;
    font-weight: bolder;
    left: 86px;
    color: red;
    font-size: 45px;
}

.title3 .mark {
    width: 205px;
    top: 85px;
    left: 57%;
    height: 64px;
    position: absolute;
}

.el-radio-button__inner,
.el-radio-group {
    padding-top: 20px !important;
    display: block !important;
}

.testinfo {
    padding-left: 30px;
    padding-top: 22px;
}

.title3 {
    width: 100%;
    height: 30px;
    text-align: center;
}

.subbtnbox {
    width: 100%;
    text-align: center;
    padding: 20px;

    .btn {
        width: 100px;
        background-color: red;
    }
}

.testbox {
    display: inline-block;
    margin-top: 20px
}

.btnbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    padding-left: 100px;
    margin-top: 30px;
    padding-right: 100px;
}

.play {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    color: red;
    cursor: pointer;

    .cp {
        font-size: 20px;
        vertical-align: middle;
    }

    .ai-ana {
        color: skyblue;
    }
}


.typing-effect {
    overflow: hidden;
    /* 确保超出部分的内容不显示 */
    border-right: .15em solid orange;
    /* 光标效果 */
    white-space: nowrap;
    /* 防止文本换行 */
    animation: typing 3s steps(20, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: orange
    }
}
</style>