mozhe
/
mental-health-student
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

学校端界面优化

This commit is contained in:
jiangzhe 2024-04-23 15:00:29 +08:00
parent 90f47db987
commit 568d7c0579
6 changed files with 112 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/apis/user.js
View File

@ -33,6 +33,13 @@ export const addRecordAPI = (record) => {
})
}
export const addRecordIdAPI = (recordId) => {
return request({
url: '/web/scale/record/' + recordId,
method: 'POST'
})
}
export const getAnswerAPI = (scaleId) => {
return request({
url: '/web/scale/answer/' + scaleId

BIN
src/assets/images/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

107
src/views/Exam/index.vue
View File

@ -8,33 +8,10 @@
<div class="content">
<el-container>
<el-aside class="aside">
<el-card class="aside-card">
<template #header>
<div class="card-header">
<span>答题卡</span>
</div>
</template>
<div class="answer">
<div v-for="(item, index) in questionList" :key="item">
<el-button circle type="danger" v-if="item.answerId" @click="handleAnswer(index)">
{{ index + 1 }}
</el-button>
<el-button v-else circle @click="handleAnswer(index)">{{ index + 1 }}</el-button>
</div>
</div>
<template #footer>
<el-countdown title="剩余时间" :value="timeLeft" value-style="color: #F56C6C;" />
</template>
</el-card>
</el-aside>
<el-main class="main">
<el-card class="card">
<template #header>
<div class="card-header">
<div class="scale-title">
{{ scaleName }}
</div>
</template>
<div class="subject-content">
<div class="subject-title">{{ currentQuestion.questionContent }}</div>
@ -47,25 +24,44 @@
</div>
<div class="subject-btn">
<el-button-group>
<el-button type="primary" size="large" @click="previous" :disabled="preDisable">
<el-button round size="large" @click="previous" :disabled="preDisable" style="border: 1px solid #1AB087;">
<el-icon class="el-icon--left">
<ArrowLeft />
</el-icon>上一题
</el-button>
<el-button v-if="finishNum" type="primary" size="large" @click="submit">
<el-button round v-if="finishNum" size="large" @click="submit" style="border: 1px solid #1AB087;">
提交<el-icon class="el-icon--right">
<ArrowRight />
</el-icon>
</el-button>
<el-button v-else type="primary" size="large" @click="next">
<el-button round v-else size="large" @click="next" style="border: 1px solid #1AB087;">
下一题<el-icon class="el-icon--right">
<ArrowRight />
</el-icon>
</el-button>
</el-button-group>
</div>
</el-card>
</el-aside>
<el-main class="main">
<el-card class="aside-card">
<template #header>
<div class="card-header">
<span>答题卡</span>
</div>
</template>
<div class="answer">
<div v-for="(item, index) in questionList" :key="item">
<el-button circle type="success" v-if="item.answerId" @click="handleAnswer(index)">
{{ index + 1 }}
</el-button>
<el-button v-else circle @click="handleAnswer(index)">{{ index + 1 }}</el-button>
</div>
</div>
<template #footer>
<el-countdown title="剩余时间" :value="timeLeft" value-style="color: #F56C6C;" />
</template>
</el-card>
</el-main>
</el-container>
</div>
@ -191,42 +187,24 @@ async function submit() {
margin: 0 auto;
.aside {
width: 400px;
padding-top: 20px;
margin: 0 auto;
.aside-card {
width: 100%;
margin: 0 auto;
.answer {
display: grid;
grid-template-columns: repeat(8, 1fr);
.el-button {
margin: 7px;
}
}
}
}
.main {
width: 800px;
height: calc(100vh - 60px);
height: calc(100vh - 90px);
margin: 0 auto;
.card {
height: 100%;
.card-header {
.scale-title {
text-align: center;
font-size: 30px;
font-size: 35px;
font-weight: bold;
line-height: 60px;
}
.subject-btn {
text-align: center;
display: flex;
justify-content: space-around;
}
.submit-footer {
@ -240,7 +218,8 @@ async function submit() {
.subject-content {
margin-left: 50px;
margin-top: 30px;
height: 400px;
height: 550px;
max-height: 550px;
.subject-title {
text-align: center;
@ -255,7 +234,7 @@ async function submit() {
::v-deep(.el-radio) {
display: block;
margin: 25px;
margin: 30px;
font-size: 25px;
}
@ -267,6 +246,26 @@ async function submit() {
}
}
}
.main {
width: 400px;
padding-top: 20px;
margin: 0 auto;
.aside-card {
width: 100%;
margin: 0 auto;
.answer {
display: grid;
grid-template-columns: repeat(7, 1fr);
.el-button {
margin: 7px;
}
}
}
}
}
}
</style>

62
src/views/ExamDetail/index.vue
View File

@ -12,10 +12,10 @@
</div>
</template>
<el-descriptions :title="`测评项：${item.evalItemName || ''}`" direction="vertical" column="1" v-for="item in des.list"
:key="item.factorRangeId">
<el-descriptions :title="`测评项：${item.evalItemName || ''}`" direction="vertical" column="1"
v-for="item in des.list" :key="item.factorRangeId">
<el-descriptions-item :label="`结果分析：${item.evalDesc || ''}`">
{{ item.evalPropose }}
<div class="content-container" v-html="item.evalPropose"></div>
</el-descriptions-item>
</el-descriptions>
@ -34,44 +34,6 @@ import { useRoute } from 'vue-router'
const route = useRoute()
const data = route.query.data
const des = JSON.parse(data)
// const des = ref({
// "evalRecordId": 2734431927582720,
// "scaleName": "人际交往心理测试",
// "list": [
// {
// "id": 2734431927779328,
// "evalRecordId": 2734431927582720,
// "evalItem": 28,
// "score": 1.0,
// "scoreRate": 3.33,
// "scaleItemRangeId": 2606988724994048,
// "status": 1,
// "scaleRecordId": 2715976035876864,
// "evalItemName": "人际关系",
// "evalDesc": "善于人际交往",
// "evalPropose": "对于性格外向、喜欢人际交往的人，以下是一些建议可以帮助你更好地发挥自己的优势和提升人际交往能力：主动参与社交活动：利用你的外向性格，积极主动参与各种社交活动和事件，如聚会、社团活动、志愿者工作等。这样可以扩大你的社交圈子，结识更多的人，并与他们建立联系；倾听和关心他人：在交流中，注重倾听他人的观点和感受。表现出对他人的关心和尊重，积极表达理解和同理心。这样可以建立良好的互动和亲密关系；保持积极的态度：以积极、乐观的态度面对人际交往。相信自己的能力，对他人持开放的心态。这样能够吸引更多的人与你交往，并建立良好的人际关系。",
// "situation": 402,
// "situationName": "低风险"
// },
// {
// "id": 2734431927779328,
// "evalRecordId": 2734431927582720,
// "evalItem": 28,
// "score": 1.0,
// "scoreRate": 3.33,
// "scaleItemRangeId": 2606988724994048,
// "status": 1,
// "scaleRecordId": 2715976035876864,
// "evalItemName": "人际关系",
// "evalDesc": "善于人际交往",
// "evalPropose": "对于性格外向、喜欢人际交往的人，以下是一些建议可以帮助你更好地发挥自己的优势和提升人际交往能力：主动参与社交活动：利用你的外向性格，积极主动参与各种社交活动和事件，如聚会、社团活动、志愿者工作等。这样可以扩大你的社交圈子，结识更多的人，并与他们建立联系；倾听和关心他人：在交流中，注重倾听他人的观点和感受。表现出对他人的关心和尊重，积极表达理解和同理心。这样可以建立良好的互动和亲密关系；保持积极的态度：以积极、乐观的态度面对人际交往。相信自己的能力，对他人持开放的心态。这样能够吸引更多的人与你交往，并建立良好的人际关系。",
// "situation": 402,
// "situationName": "低风险"
// }
// ],
// "totalScore": 1.0
// })
</script>
<style lang="scss" scoped>
@ -111,5 +73,23 @@ const des = JSON.parse(data)
.footer {
text-align: center;
}
:deep(.content-container) {
font-size: 13px;
line-height: 3em;
p {
text-indent: 2em;
color: #606266;
}
.ql-size-huge {
font-size: 2.5em;
}
.ql-size-large {
font-size: 1.5em;
}
}
}
</style>

9
src/views/Login/index.vue
View File

@ -4,7 +4,7 @@
<div class="second_bg"></div>
</div>
<div class="form">
<h1>云舒心理健康云平台</h1>
<img src="@/assets/images/logo.jpg" alt="">
<el-card shadow="never" class="login-card">
<el-form ref="formRef" :model="loginForm" :rules="loginRules" v-loading="loading" element-loading-text="登录中...">
<el-form-item prop="username">
@ -97,10 +97,9 @@ async function login() {
padding-left: 40px;
background-color: #fff;
h1 {
color: #A2A2A3;
letter-spacing: 16px;
font-weight: normal;
img {
width: 380px;
height: 250px;
}
.el-card {

18
src/views/ScaleList/index.vue
View File

@ -5,14 +5,12 @@
<span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
</el-header>
<el-main class="main">
<div class="title">国际标准抑郁与焦虑自评量表</div>
<div class="content">
<el-card shadow="hover" style="max-width: 520px; margin-bottom: 10px; position: relative;"
v-for="item in scaleList" :key="item.scaleId" @click="gotoExam(item)">
<img :src="item.coverUrl" alt="">
<div class="title">{{ item.scaleName }}</div>
<div v-if="item.used" class="desc">已测评</div>
<div v-if="item.used" class="desc"><el-tag round effect="dark" type="danger">已测评</el-tag></div>
<template #footer>
<div class="footer">
<div>
@ -32,7 +30,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getPublishAPI, addRecordAPI } from '@/apis/user'
import { getPublishAPI, addRecordIdAPI } from '@/apis/user'
const router = useRouter()
@ -40,6 +38,11 @@ const scaleList = ref([])
let batchNo;
async function getScaleList() {
const res = await getPublishAPI()
if (res.code == 500) {
ElMessage.error(res.msg)
localStorage.removeItem('token')
window.location.href = '/login'
}
scaleList.value = res.data.scaleList
batchNo = res.data.batchNo
}
@ -47,16 +50,19 @@ async function getScaleList() {
async function gotoExam(item) {
if (item.used) {
ElMessage.error('当前量表已测评，无法再测评！')
localStorage.removeItem('token')
return
}
const res = await addRecordAPI({ scaleId: item.scaleId, batchNo })
await addRecordIdAPI(item.recordId)
router.push({
path: '/exam',
query: {
scaleId: item.scaleId,
scaleName: item.scaleName,
scaleTime: item.scaleTime,
recordId: res.data
recordId: item.recordId
}
})
}