xinli/xinli-ui/src/views/psychology/report/detail.vue

<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header" class="clearfix">
        <span>测评报告详情</span>
        <div style="float: right;">
          <el-button 
            style="padding: 3px 0; margin-right: 10px;" 
            type="text" 
            icon="el-icon-edit"
            @click="handleEdit"
            v-hasPermi="['psychology:report:edit']"
          >编辑</el-button>
          <el-button style="padding: 3px 0" type="text" @click="handleBack">返回</el-button>
        </div>
      </div>
      
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="报告ID">{{ reportForm.reportId }}</el-descriptions-item>
        <el-descriptions-item label="来源类型">
          <el-tag v-if="sourceType === 'questionnaire'" type="warning">问卷</el-tag>
          <el-tag v-else type="primary">量表</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="来源ID">{{ reportForm.assessmentId || reportForm.answerId }}</el-descriptions-item>
        <el-descriptions-item label="报告标题" :span="2">{{ reportForm.reportTitle || '-' }}</el-descriptions-item>
        <el-descriptions-item label="报告类型">
          <el-tag v-if="reportForm.reportType === 'standard'" type="">标准报告</el-tag>
          <el-tag v-else-if="reportForm.reportType === 'detailed'" type="success">详细报告</el-tag>
          <el-tag v-else-if="reportForm.reportType === 'brief'" type="info">简要报告</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="生成状态">
          <el-tag v-if="reportForm.isGenerated === '0'" type="warning">未生成</el-tag>
          <el-tag v-else-if="reportForm.isGenerated === '1'" type="success">已生成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="生成时间">{{ parseTime(reportForm.generateTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(reportForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">报告摘要</el-divider>
      <div class="summary-content" v-html="reportForm.summary || '暂无摘要'"></div>

      <el-divider content-position="left">报告内容</el-divider>
      <div v-if="!reportForm.reportContent" style="padding: 20px; text-align: center; color: #999;">
        报告内容正在生成中...
      </div>
      <div v-else class="report-content" v-html="reportForm.reportContent"></div>

      <!-- 问卷成绩排名 -->
      <el-divider v-if="sourceType === 'questionnaire' && reportForm.answerId" content-position="left">成绩排名</el-divider>
      <div v-if="sourceType === 'questionnaire' && reportForm.answerId" class="rank-section">
        <el-button type="primary" size="small" @click="loadRankList" :loading="rankLoading">查看排名</el-button>
        <el-table v-if="rankList.length > 0" :data="rankList" border style="width: 100%; margin-top: 15px;">
          <el-table-column type="index" label="排名" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.$index + 1 === 1" type="danger">第1名</el-tag>
              <el-tag v-else-if="scope.$index + 1 === 2" type="warning">第2名</el-tag>
              <el-tag v-else-if="scope.$index + 1 === 3" type="success">第3名</el-tag>
              <span v-else>第{{ scope.$index + 1 }}名</span>
            </template>
          </el-table-column>
          <el-table-column prop="respondentName" label="答题人" width="150" />
          <el-table-column prop="totalScore" label="总分" width="120" align="center" />
          <el-table-column prop="submitTime" label="提交时间" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-divider v-if="reportForm.pdfPath" content-position="left">PDF下载</el-divider>
      <div v-if="reportForm.pdfPath">
        <el-button type="primary" icon="el-icon-download" @click="handleDownloadPDF">下载PDF报告</el-button>
      </div>

      <!-- AI分析 -->
      <el-divider content-position="left">AI智能分析</el-divider>
      <div class="ai-analysis-section">
        <el-button 
          type="primary" 
          icon="el-icon-magic-stick" 
          @click="handleAIAnalysis" 
          :loading="aiLoading"
          :disabled="!reportForm.reportContent"
        >
          {{ aiLoading ? '分析中...' : 'AI分析' }}
        </el-button>
        <div v-if="aiError" class="ai-error">
          <el-alert
            :title="aiError"
            type="error"
            :closable="false"
            show-icon>
          </el-alert>
        </div>
        <div v-if="aiResult" class="ai-result">
          <h3 class="ai-result-title">
            <i class="el-icon-magic-stick"></i> AI分析结果
          </h3>
          <div class="ai-result-content" v-html="aiResult"></div>
        </div>
      </div>
    </el-card>

    <!-- 报告编辑对话框 -->
    <el-dialog title="编辑报告" :visible.sync="editOpen" width="900px" append-to-body>
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
        <el-form-item label="报告标题" prop="reportTitle">
          <el-input v-model="editForm.reportTitle" placeholder="请输入报告标题" />
        </el-form-item>
        <el-form-item label="报告类型" prop="reportType">
          <el-select v-model="editForm.reportType" placeholder="请选择报告类型">
            <el-option label="标准报告" value="standard" />
            <el-option label="详细报告" value="detailed" />
            <el-option label="简要报告" value="brief" />
          </el-select>
        </el-form-item>
        <el-form-item label="报告摘要" prop="summary">
          <Editor v-model="editForm.summary" :min-height="150" />
        </el-form-item>
        <el-form-item label="报告内容" prop="reportContent">
          <Editor v-model="editForm.reportContent" :min-height="400" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
        <el-button @click="cancelEdit">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReport, getReportByAssessmentId, updateReportWithType } from "@/api/psychology/report";
import { getQuestionnaireRankList } from "@/api/psychology/questionnaireAnswer";
import request from '@/utils/request';
import axios from 'axios';
import Editor from "@/components/Editor";

export default {
  name: "ReportDetail",
  components: { Editor },
  data() {
    return {
      loading: true,
      reportForm: {},
      sourceType: null,
      rankList: [],
      rankLoading: false,
      // AI分析
      aiLoading: false,
      aiResult: '',
      aiError: '',
      // 编辑对话框
      editOpen: false,
      editForm: {},
      editRules: {
        reportTitle: [
          { required: true, message: "报告标题不能为空", trigger: "blur" }
        ],
        reportType: [
          { required: true, message: "报告类型不能为空", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.loadReport();
  },
  methods: {
    /** 加载报告 */
    loadReport() {
      this.loading = true;
      const reportId = this.$route.query.reportId;
      const assessmentId = this.$route.query.assessmentId;
      this.sourceType = this.$route.query.sourceType;
      
      if (!reportId && !assessmentId) {
        this.loading = false;
        this.$modal.msgError("缺少报告ID或测评ID参数");
        this.$router.push('/psychology/report');
        return;
      }
      
      // 如果有reportId，根据sourceType查询
      if (reportId) {
        console.log('开始加载报告，reportId:', reportId, 'sourceType:', this.sourceType);
        getReport(reportId, this.sourceType).then(response => {
          console.log('报告加载响应:', response);
          if (response && response.data) {
            console.log('报告数据:', response.data);
            console.log('报告内容:', response.data.reportContent);
            this.reportForm = response.data;
          } else {
            console.warn('报告数据为空');
            this.$modal.msgWarning("报告不存在");
          }
          this.loading = false;
        }).catch(error => {
          this.loading = false;
          console.error('加载报告失败:', error);
          console.error('错误详情:', error.response || error.message);
          this.$modal.msgError("加载报告失败，请检查报告是否存在");
        });
      } else {
        // 使用测评ID查询
        getReportByAssessmentId(assessmentId).then(response => {
          if (response.data) {
            this.reportForm = response.data;
          } else {
            this.$modal.msgWarning("报告不存在");
          }
          this.loading = false;
        }).catch(error => {
          this.loading = false;
          console.error('加载报告失败:', error);
          this.$modal.msgError("加载报告失败，请检查报告是否存在");
        });
      }
    },
    /** 返回 */
    handleBack() {
      this.$router.back();
    },
    /** 下载PDF */
    handleDownloadPDF() {
      if (this.reportForm.pdfPath) {
        window.open(this.reportForm.pdfPath);
      } else {
        this.$modal.msgWarning("PDF文件不存在");
      }
    },
    /** 加载排名列表 */
    loadRankList() {
      if (!this.reportForm.answerId) {
        this.$modal.msgWarning("无法获取问卷ID");
        return;
      }
      
      // 从答题记录中获取问卷ID
      request({
        url: '/psychology/questionnaire/answer/' + this.reportForm.answerId,
        method: 'get'
      }).then(response => {
        if (response.data && response.data.questionnaireId) {
          this.rankLoading = true;
          getQuestionnaireRankList(response.data.questionnaireId).then(rankResponse => {
            this.rankList = rankResponse.data || [];
            this.rankLoading = false;
          }).catch(error => {
            this.rankLoading = false;
            console.error('加载排名失败:', error);
            this.$modal.msgError("加载排名失败");
          });
        } else {
          this.$modal.msgWarning("无法获取问卷ID");
        }
      }).catch(error => {
        console.error('获取答题记录失败:', error);
        this.$modal.msgError("获取答题记录失败");
      });
    },
    /** 编辑按钮操作 */
    handleEdit() {
      this.editForm = {
        reportId: this.reportForm.reportId,
        sourceType: this.sourceType,
        reportTitle: this.reportForm.reportTitle || '',
        reportType: this.reportForm.reportType || 'standard',
        summary: this.reportForm.summary || '',
        reportContent: this.reportForm.reportContent || ''
      };
      this.editOpen = true;
    },
    /** 提交编辑表单 */
    submitEditForm() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          const updateData = {
            reportTitle: this.editForm.reportTitle,
            reportType: this.editForm.reportType,
            summary: this.editForm.summary,
            reportContent: this.editForm.reportContent
          };
          
          updateReportWithType(this.editForm.reportId, this.editForm.sourceType, updateData).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.editOpen = false;
            // 重新加载报告数据
            this.loadReport();
          }).catch(error => {
            console.error('修改报告失败:', error);
            this.$modal.msgError("修改失败");
          });
        }
      });
    },
    /** 取消编辑 */
    cancelEdit() {
      this.editOpen = false;
      this.resetEditForm();
    },
    /** 重置编辑表单 */
    resetEditForm() {
      this.editForm = {
        reportId: null,
        sourceType: null,
        reportTitle: '',
        reportType: 'standard',
        summary: '',
        reportContent: ''
      };
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
    },
    /** AI分析 */
    async handleAIAnalysis() {
      if (!this.reportForm.reportContent) {
        this.$modal.msgWarning("报告内容为空，无法进行分析");
        return;
      }

      this.aiLoading = true;
      this.aiError = '';
      this.aiResult = '';

      // Ollama API配置
      const OLLAMA_URL = 'http://192.168.0.106:11434/api/generate';
      const MODEL = 'deepseek-r1:32b';
      
      // 构建系统提示词
      const SYSTEM_PROMPT = [
        '你是专业心理测评报告分析师，请根据用户提供的报告内容进行深度分析。要求：',
        '1. 提取报告的核心信息和关键指标；',
        '2. 分析测评结果的含义和可能的影响；',
        '3. 提供专业、客观、易懂的分析解读（500-800字）；',
        '4. 使用结构化的格式输出，包含：核心结论、详细分析、建议、总体结论四个部分；',
        '5. 仅输出分析结果，不添加额外建议、问候语或思考过程；',
        '6. 使用HTML格式输出，使用<h3>标签作为小标题，<p>标签作为段落。'
      ].join('\n');

      // 构建完整的提示词
      const reportContent = this.reportForm.reportContent || '';
      const reportTitle = this.reportForm.reportTitle || '心理测评报告';
      const reportType = this.reportForm.reportType || '标准报告';
      
      // 提取纯文本内容（去除HTML标签）
      const textContent = reportContent.replace(/<[^>]*>/g, '').substring(0, 3000);
      
      const prompt = `${SYSTEM_PROMPT}\n\n重要：请直接输出结果，不要包含任何思考过程、<think>标签或<think>标签。\n\n报告标题：${reportTitle}\n报告类型：${reportType}\n报告内容：${textContent}`;

      try {
        const { data } = await axios.post(OLLAMA_URL, {
          model: MODEL,
          prompt: prompt,
          temperature: 0.2,
          num_predict: 1000,
          stream: false
        }, {
          timeout: 60000 // 60秒超时
        });

        let rawResponse = data?.response ?? '无法解析模型输出';
        
        // 过滤掉思考过程标签
        rawResponse = rawResponse
          .replace(/<think>[\s\S]*?<\/think>/gi, '')
          .replace(/<think>[\s\S]*?<\/redacted_reasoning>/gi, '')
          .replace(/<think[\s\S]*?>/gi, '')
          .replace(/<redacted_reasoning[\s\S]*?>/gi, '')
          // 移除Markdown代码块标记
          .replace(/```html\s*/gi, '')
          .replace(/```\s*/g, '')
          .replace(/```[a-z]*\s*/gi, '')
          .trim();

        if (!rawResponse || rawResponse === '无法解析模型输出') {
          this.aiError = '模型返回结果为空，请稍后重试';
          return;
        }

        // 格式化结果，确保HTML格式正确
        this.aiResult = this.formatAIResult(rawResponse);
        
      } catch (err) {
        console.error('AI分析失败:', err);
        if (err.code === 'ECONNABORTED' || err.message.includes('timeout')) {
          this.aiError = '请求超时，请检查Ollama服务是否正常运行';
        } else if (err.response) {
          this.aiError = err.response.data?.error || err.message || 'AI分析失败，请稍后重试';
        } else if (err.request) {
          this.aiError = '无法连接到Ollama服务，请检查服务地址是否正确（当前：' + OLLAMA_URL + '）';
        } else {
          this.aiError = err.message || 'AI分析失败，请稍后重试';
        }
      } finally {
        this.aiLoading = false;
      }
    },
    /** 格式化AI分析结果 */
    formatAIResult(text) {
      // 移除Markdown代码块标记（```html、```等）
      let html = text
        .replace(/```html\s*/gi, '')
        .replace(/```\s*/g, '')
        .replace(/```[a-z]*\s*/gi, '')
        .trim();
      
      // 如果已经是HTML格式，清理后返回
      if (html.includes('<h3>') || html.includes('<p>') || html.includes('<div>')) {
        // 移除可能残留的代码块标记
        html = html.replace(/```html\s*/gi, '').replace(/```\s*/g, '');
        return html;
      }
      
      // 处理标题（以数字开头或包含"结论"、"分析"、"建议"等关键词的行）
      html = html.replace(/^(\d+[\.、]?\s*[^\n]+)$/gm, '<h3>$1</h3>');
      html = html.replace(/^([^\n]*(?:结论|分析|建议|总结|概述)[^\n]*)$/gm, '<h3>$1</h3>');
      
      // 将段落分隔符转换为<p>标签
      html = html.split('\n\n').map(para => {
        para = para.trim();
        if (!para) return '';
        if (para.startsWith('<h3>')) return para;
        return '<p>' + para.replace(/\n/g, '<br>') + '</p>';
      }).join('');
      
      // 确保每个段落都有正确的格式
      html = html.replace(/(<p>.*?<\/p>)/g, (match) => {
        if (match.includes('<h3>')) return match.replace(/<p>|<\/p>/g, '');
        return match;
      });
      
      // 最后再次清理可能残留的代码块标记
      html = html.replace(/```html\s*/gi, '').replace(/```\s*/g, '');
      
      return html;
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.summary-content,
.report-content {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  min-height: 100px;
  line-height: 1.8;
  color: #333;
}

.summary-content >>> p,
.report-content >>> p {
  margin: 10px 0;
}

.summary-content >>> h1,
.report-content >>> h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0;
}

.summary-content >>> h2,
.report-content >>> h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 12px 0;
}

.summary-content >>> h3,
.report-content >>> h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

/* AI分析区域样式 */
.ai-analysis-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.ai-error {
  margin-top: 15px;
}

.ai-result {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-result-title {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-result-title i {
  font-size: 20px;
}

.ai-result-content {
  line-height: 1.8;
  color: #333;
}

.ai-result-content >>> h3 {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  margin: 20px 0 10px 0;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

.ai-result-content >>> p {
  margin: 12px 0;
  text-align: justify;
  color: #606266;
}

.ai-result-content >>> p:first-of-type {
  margin-top: 0;
}

.ai-result-content >>> br {
  line-height: 1.8;
}
</style>