feat(心理评估): 新增心理评估数据获取和展示功能
添加获取心理评估数据的API接口，并实现前端表格展示和详情查看功能。主要包含： 1. 新增获取心理评估数据的API方法 2. 创建心理评估列表页面，展示学生最新评估等级 3. 实现查看详情功能，显示学生信息和历史评估记录 4. 添加评估等级标签样式和颜色区分
This commit is contained in:
@@ -1,8 +1,223 @@
|
||||
<template>
|
||||
<div class="cmd">你好
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-table v-loading="loading" :data="psychologicalList" style="width: 100%">
|
||||
<el-table-column label="学号" align="center" prop="studentId" min-width="120" />
|
||||
<el-table-column label="最新评估等级" align="center" prop="rating" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getRatingTagType(scope.row.rating)" effect="dark">
|
||||
{{ scope.row.rating }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="viewDetails(scope.row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 心理评估详情弹出对话框 -->
|
||||
<el-dialog
|
||||
title="心理评估详情"
|
||||
:visible.sync="dialogVisible"
|
||||
width="80%"
|
||||
:before-close="closeRatingHistory"
|
||||
class="rating-dialog"
|
||||
>
|
||||
<div v-if="selectedStudent">
|
||||
<h3>学生信息</h3>
|
||||
<p><strong>学号：</strong>{{ selectedStudent.studentId }}</p>
|
||||
<p><strong>姓名：</strong>{{ selectedStudent.studentName }}</p>
|
||||
<p><strong>班级：</strong>{{ selectedStudent.className }}</p>
|
||||
<p><strong>辅导员：</strong>{{ selectedStudent.counselor }}</p>
|
||||
|
||||
<h3>历史评估记录</h3>
|
||||
<el-table :data="studentHistoryList" style="width: 100%">
|
||||
<el-table-column label="评估等级" align="center" prop="rating" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getRatingTagType(scope.row.rating)" effect="dark">
|
||||
{{ scope.row.rating }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="评估时间" align="center" prop="createdTime" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
import { getPsychologicalRatings } from "@/api/aitutor/chat";
|
||||
import { listStudent } from "@/api/stuCQS/basedata/student";
|
||||
|
||||
export default {
|
||||
name: "ChatWarning",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 心理评估表格数据
|
||||
psychologicalList: [],
|
||||
// 对话框显示状态
|
||||
dialogVisible: false,
|
||||
// 选中的学生信息
|
||||
selectedStudent: null,
|
||||
// 学生历史评估记录
|
||||
studentHistoryList: [],
|
||||
// 原始数据（用于详情查看）
|
||||
originalData: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询心理评估列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getPsychologicalRatings().then(response => {
|
||||
// 处理数据，按学生ID分组，只保留最新的评估记录
|
||||
this.originalData = response.data || [];
|
||||
const studentMap = new Map();
|
||||
|
||||
this.originalData.forEach(item => {
|
||||
const studentId = item.studentId;
|
||||
if (!studentMap.has(studentId) ||
|
||||
new Date(item.createdTime) > new Date(studentMap.get(studentId).createdTime)) {
|
||||
studentMap.set(studentId, item);
|
||||
}
|
||||
});
|
||||
|
||||
this.psychologicalList = Array.from(studentMap.values());
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error('获取心理评估数据失败:', error);
|
||||
this.loading = false;
|
||||
this.$modal.msgError('获取数据失败');
|
||||
});
|
||||
},
|
||||
/** 查看详情 */
|
||||
viewDetails(row) {
|
||||
// 查询学生基本信息
|
||||
this.getStudentInfo(row.studentId);
|
||||
|
||||
// 获取该学生的所有历史记录
|
||||
this.studentHistoryList = this.originalData
|
||||
.filter(item => item.studentId === row.studentId)
|
||||
.sort((a, b) => new Date(b.createdTime) - new Date(a.createdTime));
|
||||
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
/** 查询学生基本信息 */
|
||||
getStudentInfo(studentId) {
|
||||
// 使用现有的学生查询API
|
||||
const queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 1,
|
||||
stuNo: studentId
|
||||
};
|
||||
|
||||
this.getList2(queryParams).then(response => {
|
||||
if (response.rows && response.rows.length > 0) {
|
||||
const student = response.rows[0];
|
||||
this.selectedStudent = {
|
||||
studentId: student.stuNo,
|
||||
studentName: student.name,
|
||||
className: student.srsMajors ? student.srsMajors.majorName : '未知班级',
|
||||
counselor: student.cphName
|
||||
};
|
||||
} else {
|
||||
this.selectedStudent = {
|
||||
studentId: studentId,
|
||||
studentName: '未找到',
|
||||
className: '未找到',
|
||||
counselor: '未找到'
|
||||
};
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取学生信息失败:', error);
|
||||
this.selectedStudent = {
|
||||
studentId: studentId,
|
||||
studentName: '查询失败',
|
||||
className: '查询失败',
|
||||
counselor: '查询失败'
|
||||
};
|
||||
});
|
||||
},
|
||||
/** 查询学生列表 */
|
||||
getList2(queryParams) {
|
||||
this.loading = true;
|
||||
return listStudent(queryParams).then(response => {
|
||||
this.loading = false;
|
||||
return response;
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
/** 获取评估等级标签类型 */
|
||||
getRatingTagType(rating) {
|
||||
if (!rating) return 'info';
|
||||
|
||||
const ratingStr = rating.toString().toLowerCase();
|
||||
if (ratingStr.includes('高') || ratingStr.includes('严重') || ratingStr.includes('high')) {
|
||||
return 'danger';
|
||||
} else if (ratingStr.includes('中') || ratingStr.includes('medium')) {
|
||||
return 'warning';
|
||||
} else if (ratingStr.includes('低') || ratingStr.includes('轻') || ratingStr.includes('low')) {
|
||||
return 'success';
|
||||
}
|
||||
return 'info';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 对话框样式 */
|
||||
.rating-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: #f8f9fa;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.student-info {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.rating-content {
|
||||
padding: 20px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.no-rating {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user