ai-error-assistant-mobile 0.0.1

package/components/demo/src/error-chat.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="error-chat-contain">
+    <div class="exercises-answer">
+      <div class="exercises-answer-bg"></div>
+      <p class="question-stem" v-html="questionStem.title"></p>
+      <div class="answer-part" v-if="questionStem.type === 'single' || questionStem.type === 'multiple'">
+        <div class="answer-list" v-for="(item, index) in questionStem.options" :key="index">
+          <div class="check-content" style="width: 24px">
+            <img src="../static/correct.png"
+                 v-if="questionStem.answer.indexOf(item) > -1"
+                 alt=""
+                 style="width: 24px">
+          </div>
+          <div class="answer-list" v-html="item"></div>
+        </div>
+      </div>
+      <div class="answer-part"
+           style="padding-bottom: 24px"
+           v-if="questionStem.type === 'judge'">
+        正确答案: <span style="margin-left: 8px">{{ questionStem.answer.join(',') }}</span>
+      </div>
+      <!--            <div class="answer-part"-->
+      <!--                 style="padding-bottom: 24px"-->
+      <!--                 v-if="questionStem.type === 'gapfilling'">-->
+      <!--                正确答案:-->
+      <!--                <span style="margin-left: 8px"-->
+      <!--                      v-for="(item, index) in questionStem.answer"-->
+      <!--                      :key="index">-->
+      <!--                    {{ item }}<span v-if="index !== questionStem.answer.length - 1">,</span>-->
+      <!--                </span>-->
+      <!--            </div>-->
+      <div class="answer-part"
+           style="padding-bottom: 24px"
+           v-if="questionStem.type === 'shortanswer' || questionStem.type === 'gapfilling'">
+        <span style="vertical-align: inherit; display: inline-block">正确答案:</span>
+        <span style="margin-left: 8px; display: inline-block; width: calc(100% - 82px); vertical-align: top;"
+              v-html="questionStem.answer.join(',')"></span>
+      </div>
+      <div class="student-answer-part">
+        <div class="check-content" style="width: 24px; margin-right: 16px">
+          <img src="../static/error.png" style="width: 24px">
+        </div>
+        <div v-if="questionStem.type === 'single' || questionStem.type === 'multiple'">
+          <div v-for="(item, index) in questionStem.studentAnswer"
+               style="margin-right: 16px; font-size: 0.875rem; margin-top: -10px;"
+               :key="index"
+               v-html="item">
+          </div>
+        </div>
+        <div v-if="questionStem.type === 'judge'">
+          <span style="margin-left: 8px">{{ questionStem.studentAnswer.join(',') }}</span>
+        </div>
+        <!--                <span style="margin-left: 8px"-->
+        <!--                      v-if="questionStem.type === 'gapfilling'"-->
+        <!--                      v-for="(item, index) in questionStem.studentAnswer"-->
+        <!--                      :key="index">-->
+        <!--                    {{ item }}<span v-if="index !== questionStem.studentAnswer.length - 1">,</span>-->
+        <!--                </span>-->
+        <div v-if="questionStem.type === 'shortanswer' || questionStem.type === 'gapfilling'">
+          <span style="margin-left: 8px" v-html="questionStem.studentAnswer.join(',')"></span>
+        </div>
+      </div>
+    </div>
+    <div class="ai-analyze-content"
+         element-loading-text="分析中,请稍后"
+         v-loading="!Object.keys(analysisData).length > 0">
+      <div class="title-label">题目解析</div>
+      <div class="answer-content" v-html="analysisData.analysis"></div>
+      <div class="title-label">错因分析</div>
+      <div class="answer-content" v-html="analysisData.reason"></div>
+      <div class="title-label"
+           v-if="businessSource !== '2' && analysisData.recommend && analysisData.recommend.length > 0 && !allIdWithStart">
+        推荐资料
+      </div>
+      <div class="answer-content" v-if="businessSource !== '2' ">
+        <div v-for="(list,index) in analysisData.recommend" :key="index" style="margin-bottom: 8px">
+          <a :href="'https://ai-yuliao.hep.com.cn' + list.url"
+             target="_blank"
+             v-if="!list.title.startsWith(chatMajorId)">{{ list.title }}
+          </a>
+        </div>
+      </div>
+      <chat-tools type="error"
+                  :chatId="chatId"
+                  :detailData="detailData"
+                  @on-reanswer="reanswer"/>
+    </div>
+  </div>
+</template>
+<script>
+import ChatTools from './chat-tools.vue';
+import {erranalysis, retryAnalysis} from '../api/index'
+
+export default {
+  name: 'ErrorChart',
+  components: {
+    ChatTools
+  },
+  props: {
+    questionStem: {},
+    businessSource: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      detailData: {}, // 记录页面点赞 踩情况
+      analysisData: {}, // 记录页面点赞 踩情况
+      chatId: '', // 对话id
+      chatMajorId: '', // 智能体id
+      allIdWithStart: true // 智能体id
+    }
+  },
+  watch: {
+    questionStem: {
+      handler() {
+        if (this.questionStem) this.getErrorAnalysis();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    async getErrorAnalysis() {
+      try {
+        this.analysisData = {};
+        const analysisRes = await erranalysis({
+          courseId: this.questionStem.courseId,
+          busId: this.questionStem.busId,
+          questionType: this.questionStem.type,
+          title: this.questionStem.title,
+          answer: this.questionStem.answer.join(','),
+          studentAnswer: this.questionStem.studentAnswer.join(','),
+          optionList: this.questionStem.options,
+        });
+        const {
+          eaAnalysisDtoList: [{content, errId, chatId, contentId, type}],
+          xhModelDetailVoList
+        } = analysisRes;
+        if (xhModelDetailVoList) this.chatMajorId = xhModelDetailVoList[0].chatMajorId;
+        // 传入工具中的值
+        this.chatId = chatId;
+        this.detailData = {
+          msgId: contentId,
+          zan: type === 1,
+          cai: type === 2
+        }
+        this.$emit('on-init', xhModelDetailVoList, chatId);
+
+        try {
+          this.analysisData = JSON.parse(content);
+          this.detailData.errId = errId;
+          if (this.analysisData.recommend && this.analysisData.recommend.length > 0) {
+            for (let item of this.analysisData.recommend) {
+              if (!item.title.startsWith(this.chatMajorId)) {
+                this.allIdWithStart = false;
+              }
+            }
+          }
+        } catch (e) {
+          this.$message.warning('解析失败' + e);
+          this.analysisData = {key: true};
+          console.log(e);
+        }
+      } catch (e) {
+        throw new Error(e);
+      }
+    },
+    async reanswer(list) {
+      const cache = {...this.analysisData};
+      this.analysisData = {};
+      const analysisRes = await retryAnalysis(list.errId);
+      if (!analysisRes) {
+        this.analysisData = {...cache};
+        return;
+      }
+      const {eaAnalysisDtoList: [{content, errId, contentId, type}]} = analysisRes;
+      this.detailData = {
+        msgId: contentId,
+        zan: type === 1,
+        cai: type === 2
+      }
+      try {
+        this.analysisData = JSON.parse(content);
+        this.detailData.errId = errId;
+      } catch (e) {
+        this.$message.warn('解析失败');
+        this.analysisData = {key: true};
+        console.log(e);
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.error-chat-contain {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.exercises-answer {
+  position: relative;
+  overflow: hidden;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  background: #fff;
+  margin-bottom: 1.5rem;
+}
+
+.question-stem {
+  position: relative;
+  z-index: 1;
+  font-size: 1rem;
+  color: #202840;
+  line-height: 1.5;
+  font-weight: 500;
+  margin: 0;
+  word-break: break-word;
+}
+
+.answer-part {
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #d3d4e1;
+
+  .check-content {
+    margin-right: 1rem;
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+}
+
+.answer-list {
+  display: flex;
+  margin-bottom: 0.5rem;
+  align-items: flex-start;
+  font-size: 0.875rem;
+
+  > div:last-child {
+    flex: 1;
+    word-break: break-word;
+  }
+}
+
+.student-answer-part {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-left: 0.5rem;
+  /* flex-wrap: wrap; */
+
+  .check-content {
+    width: 24px;
+    margin-right: 16px;
+    flex-shrink: 0;
+  }
+
+  > div:nth-child(2) {
+    flex-grow: 1;
+    min-width: 0;
+    word-break: break-word;
+  }
+}
+
+.ai-analyze-content {
+  border-radius: 0.75rem;
+  background: #fff;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+
+  .title-label {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgba(96, 96, 224, 1);
+    border: 1px solid rgba(96, 96, 224, 1);
+    text-align: center;
+    border-radius: 0 50px 50px 50px;
+    background: linear-gradient(to bottom, #DDDDFB, #FFFFFF);
+    margin-bottom: 1rem;
+  }
+
+  .answer-content {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #666;
+    margin-bottom: 1.5rem;
+    word-break: break-word;
+
+    :deep(p) {
+      margin: 0.5rem 0;
+    }
+
+    :deep(pre) {
+      background: #f5f5f5;
+      padding: 0.75rem;
+      border-radius: 0.25rem;
+      overflow-x: auto;
+      margin: 0.5rem 0;
+    }
+
+    :deep(code) {
+      font-family: monospace;
+      background: #f5f5f5;
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+    }
+
+    a {
+      color: #1890ff;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .error-chat-contain {
+    padding: 0 0.75rem;
+  }
+
+  .exercises-answer {
+    padding: 1rem;
+  }
+
+  .question-stem {
+    font-size: 0.9375rem;
+  }
+
+  .ai-analyze-content {
+    padding: 1rem;
+
+    .title-label {
+      font-size: 0.8125rem;
+      padding: 0.5rem 1rem;
+    }
+
+    .answer-content {
+      font-size: 0.8125rem;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .error-chat-contain {
+    padding: 0 0.5rem;
+  }
+
+  .exercises-answer {
+    padding: 0.75rem;
+  }
+
+  .question-stem {
+    font-size: 0.875rem;
+  }
+
+  .ai-analyze-content {
+    padding: 0.75rem;
+
+    .title-label {
+      font-size: 0.75rem;
+      padding: 0.5rem 1rem;
+    }
+
+    .answer-content {
+      font-size: 0.875rem;
+    }
+  }
+}
+</style>