chenJinxu
/
TelpoH5FrontendWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'develop' into test

test
JinxChen 1 year ago
parent
2df167f8e5 fbd292f256
commit
b253049254
12 changed files with 2128 additions and 10 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -2
      README.md
  2. +59
    -0
      package-lock.json
  3. +2
    -1
      package.json
  4. +2
    -0
      src/assets/css/public.scss
  5. BIN
      src/assets/img/no_data_01.png
  6. +21
    -3
      src/config/models.js
  7. +9
    -3
      src/main.js
  8. +8
    -1
      src/router/index.js
  9. +312
    -0
      src/views/health/psychological/index.scss
  10. +1077
    -0
      src/views/health/psychological/index.vue
  11. +286
    -0
      src/views/psychological-modeling/index.vue
  12. +341
    -0
      src/views/psychological-questionnaire/index.vue

+ 11
- 2
README.md View File

@@ -1,7 +1,7 @@
<!--
* @Date: 2022-08-17 16:19:13
* @LastEditors: JinxChen
* @LastEditTime: 2023-05-07 13:09:30
* @LastEditTime: 2023-05-30 11:08:46
* @FilePath: \TelpoH5FrontendWeb\README.md
* @description: 项目说明
-->
@@ -424,4 +424,13 @@ feature
`2023.5.13`
update
- 告警
- 修改 误报文字为 免告警
- 修改 误报文字为 免告警

## v1.0.52
`2023.5.30`
feature
- 增加 心理监测详情页面，抑郁，压力和疲劳当天图表展示
- 增加 echarts图表依赖
- 王泽林
- 增加 心理监测-问卷调查页面
- 增加 心理监测-建模查询页面

+ 59
- 0
package-lock.json View File

@@ -14,6 +14,7 @@
"clipboard": "^2.0.11",
"core-js": "^3.6.5",
"dayjs": "^1.11.7",
"echarts": "^5.4.1",
"html2canvas": "^1.4.1",
"nprogress": "^0.2.0",
"rxjs": "^7.8.0",
@@ -7174,6 +7175,20 @@
"safer-buffer": "^2.1.0"
}
},
"node_modules/echarts": {
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.4.3"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/editorconfig": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -20052,6 +20067,19 @@
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
},
"node_modules/zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@@ -25702,6 +25730,22 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.4.3"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"editorconfig": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -36093,6 +36137,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}

+ 2
- 1
package.json View File

@@ -25,7 +25,8 @@
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"weixin-js-sdk": "^1.6.0",
"clipboard": "^2.0.11"
"clipboard": "^2.0.11",
"echarts": "^5.4.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",


+ 2
- 0
src/assets/css/public.scss View File

@@ -3,6 +3,8 @@ $blue: #2599ff;
$next: #8bc6fa;
$red: #ff8c8c;
$background: #f2f4f5;
// 灰色线条
$lineGray: #F5F5F5;
$border_color: #d1d1d1;
/* 绑定时选择人物关系图片head.png */
$spriteWidthHead: 180;


BIN
src/assets/img/no_data_01.png View File

Before After
Width: 263  |  Height: 165  |  Size: 24KB

+ 21
- 3
src/config/models.js View File

@@ -1,11 +1,11 @@
/*
* @Date: 2021-11-20 10:26:39
* @LastEditors: JinxChen
* @LastEditTime: 2023-05-13 22:16:53
* @LastEditTime: 2023-05-29 17:10:20
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description:
*/
export const VERSION_MODEL = '1.0.51F'; //版本号
export const VERSION_MODEL = '1.0.52F'; //版本号
export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/',
test: 'http://zfb.ssjlai.com/web/',
@@ -23,4 +23,22 @@ export const BaiduStatisticsModel = {
production: "https://hm.baidu.com/hm.js?b33e6f07636c9fd9ec8cfe04979f1664", // 随手精灵百度流量统计 正式环境
test: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境
development: "https://hm.baidu.com/hm.js?edb76b471e997167b7782c1513382771", // 随手精灵百度流量统计 测试环境
}
};
// 情绪模型
export const EmotionModel = {
// 抑郁
depression: {
name: '抑郁',
type: 2
},
// 压力
stress: {
name: '压力',
type: 1
},
// 疲劳
tiredness: {
name: '疲劳',
type: 3
}
};

+ 9
- 3
src/main.js View File

@@ -1,7 +1,7 @@
/*
* @Date: 2022-01-19 10:08:26
* @LastEditors: JinxChen
* @LastEditTime: 2023-05-10 09:15:16
* @LastEditTime: 2023-05-30 10:58:58
* @FilePath: \TelpoH5FrontendWeb\src\main.js
* @description:
*/
@@ -14,6 +14,8 @@ import '@/assets/css/reset.scss';
import dayjs from 'dayjs';
// ui库按需引入
import 'vant/lib/index.css';
// 引入echarts
import * as echarts from 'echarts';
import { BaiduStatisticsModel } from '@/config/models';
import {
Button,
@@ -55,6 +57,7 @@ import {
Tabs,
Toast,
ActionSheet,
Progress,
} from 'vant'; //按需加载vant组件

Vue
@@ -97,16 +100,18 @@ Vue
.use(Tabs)
.use(Toast)
.use(ActionSheet)
.use(Progress)

Vue.config.productionTip = false;
Vue.config.devtools = true;

// 全局配置 loading
Toast.setDefaultOptions('success', {
duration: 2500,
duration: 1500,
forbidClick: true,
});
Toast.setDefaultOptions('loading', {
duration: 0,
duration: 1500,
forbidClick: true,
});
Dialog.setDefaultOptions({
@@ -115,6 +120,7 @@ Dialog.setDefaultOptions({
});
Vue.config.productionTip = false;
Vue.prototype.$dayjs = dayjs;
Vue.prototype.$echarts = echarts;
Vue.prototype.$bus = new Vue();
router.afterEach((to, from, next) => {
// 创建百度统计js


+ 8
- 1
src/router/index.js View File

@@ -1,7 +1,7 @@
/*
* @Date: 2023-02-25 16:34:35
* @LastEditors: JinxChen
* @LastEditTime: 2023-03-24 14:40:54
* @LastEditTime: 2023-05-30 11:05:35
* @FilePath: \TelpoH5FrontendWeb\src\router\index.js
* @description:
*/
@@ -31,6 +31,13 @@ const routes = [
{ path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) },

{ path: '/alarmDetails', name: 'alarmDetails', component: resolve => require(['@/views/alarm/alarm-details'], resolve) },

// 心理监测
{ path: '/PsychologicalModeling', name: 'PsychologicalModeling', component: resolve => require(['@/views/psychological-modeling'], resolve) },
{ path: '/PsychologicalQuestionnaire', name: 'PsychologicalQuestionnaire', component: resolve => require(['@/views/psychological-questionnaire'], resolve) },

// 健康-心理监测详情，抑郁，压力和疲劳
{ path: '/psychological', name: 'psychological', component: resolve => require(['@/views/health/psychological'], resolve) },
];

const router = new VueRouter({


+ 312
- 0
src/views/health/psychological/index.scss View File

@@ -0,0 +1,312 @@
$newBlue: #638EE4;
.psychological-container{
height: 100vh;
width: 100%;
overflow: hidden;
background-color: #fff;
.main {
height: calc(100vh - 45px);
overflow: scroll;
.top {
flex: 1;

.tab-bar {
padding: 23px 13px 0 13px;
.date-tab-con {
padding: 10px 0;
height: 35px;
display: flex;
justify-content: flex-start;
align-items: center;
.date-tab-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1;
border-radius: 15px;
color: #fff;
.date-tab-item {
height: 35px;
width: 100%;
color: #6D6D6D;
font-size: 18px;
@include center();
border: 1px solid $newBlue;
&.active {
background-color: $newBlue;
color: #fff;
}
&.notClick {
background-color: $border_color;
color: #fff;
border: 1px solid #fff;
}
}
.date-tab-item:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.date-tab-item:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 27px 16px 16px 13px;
font-size: 18px;
.title-left {
font-weight: bold;
}
}
.monitoring-count {
text-align: left;
padding: 3px 14px;
line-height: 20px;
p {
font-size: 12px;
color: #8B8B8B;
}
}
.pie-chart-con {
flex: 1;
padding: 17px 0 45px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
.pie-chart-left {
position: relative;
height: 180px;
padding-left: 23px;
width: 40%;
@include center();
#pieChart {
height: 106px;
width: 106px;
}
}
.pie-chart-right {
height: 180px;
width: 55%;
padding-right: 20px;
@include center();
.list {
flex-direction: column;
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 9px 0;
.item-left {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 10px;
.circle {
height: 12px;
width: 12px;
margin: 0 4px;
}
span {
font-size: 15px;
}
.text {
color: #000;
}
}
.item-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
}
}
.statistics {
position: relative;
padding: 0 12px 36px 36px;
.list {
flex: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
.item {
@include center();
width: 58px;
/* height: px2rem(136); */
flex-direction: column;
.top {
font-size: 12px;
}
.middle {
font-size: 24px;
font-weight: bold;
padding: 16px 5px 11px 5px;
}
.bottom {
font-size: 9px
}
}
}
}
}
.line {
position: relative;
height: 11px;
background-color: $lineGray;
}
.bottom {
flex: 1;
.echart-container {
height: 400px;
background-color:#fff;
padding: 0 5px;
.echart {
height: 400px;
padding: 0 5px;
}
}
.line-gray {
height: 11px;
width: 100%;
background-color: $lineGray;
margin-top: 30px;
}
.result {
.result-con {
height: 100%;
background-color: #fff;
border-radius: 10px;
&.reminder {
padding: 0 16px 20px 16px;
}
.title {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
margin-bottom: 10px;
span {
font-size: 18px;
font-weight: bold;
}
.font-28 {
font-weight: 400;
font-size: 13px;
color: #8B8B8B;
text-align: left;
}
.title-no-data {
padding: 34px 0 13px 15px;
}
p {
font-size: 12px;
color: $newBlue;
}
.title-emo {
font-size: 24px;
padding: 14px 0 21px 0;
}
.no-data {
height: 250px;
width: 100%;
@include center();
flex-direction: column;
img {
height: 110px;
width: 175px;
}
p {
color: #999;
font-size: 12px;
padding: 20px 0 65px 0;
}
}
}
.title-text {
padding: 34px 0 13px 15px;
}
.title-reminder {
padding: 34px 0 0 0;
}
.friendly-reminder, .warm-reminder {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
margin-bottom: 10px;
background-color: #F2F2F2;
padding: 20px 19px 19px 14px;
p {
font-weight: bold;
text-align: left;
padding-bottom: 11px;
font-size: 15px;
}
span {
text-align: left;
font-size: 12px;
}
}
.mood-list {
display: grid;
grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
grid-template-rows: repeat(2, 1fr);
gap: 21px;
//width: 100%;
padding: 0 44px 20px 37px;
.item {
width: 137px;
height: 94px;
/* padding: px2rem(47) px2rem(57) px2rem(49) px2rem(57); */
background-color: #F2F6FF;
@include center();
flex-direction: column;
p {
font-size: 14px;
padding: 0;
color: #666666;
.day {
padding: 5px;
font-size: 28px;
}
.day-text {
font-size: 12px
}
}
}
}
.mood-list-no-data {
height: 250px;
width: 100%;
.no-data {
@include center();
flex-direction: column;
img {
height: 110px;
width: 175px;
}
p {
color: #999;
font-size: 12px;
padding: 20px 0 65px 0;
}
}
}
}
}
}
}
.title {
font-size: 16px;
}
}

+ 1077
- 0
src/views/health/psychological/index.vue
File diff suppressed because it is too large
View File


+ 286
- 0
src/views/psychological-modeling/index.vue View File

@@ -0,0 +1,286 @@
<template>
<div class="page">
<div class="tip">
<div class="icon">
<i class="iconfont icon-tishi"></i>
</div>
<div class="info">
<div class="titie">温馨提醒：</div>
<div class="content">
首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。
</div>
</div>
</div>
<div v-if="info">
<div class="step">
<div class="name">第一步</div>
<div class="title">
<div class="text">连续佩戴两小时</div>
<div class="status success" v-if="info.progress === 1">
<span class="icon"
><i class="iconfont icon-caozuochenggong"></i
></span>
<span>已完成</span>
</div>
<div class="status" v-else>待完成</div>
</div>
<div class="schedule">
<van-progress
:percentage="info.progress"
stroke-width="10px"
color="#638ee4"
:show-pivot="false"
></van-progress>
</div>
<div class="sub_title">
请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。
</div>
</div>
<div class="step">
<div class="name">第二步</div>
<div class="title">
<div class="text">情绪初始化评估</div>
<div class="status success" v-if="info.initScaleState === 1">
<span class="icon"
><i class="iconfont icon-caozuochenggong"></i
></span>
<span>已完成</span>
</div>
<div class="status" v-else>待完成</div>
</div>
<div class="sub_title">
完成一次“情绪初始化评估”，有助于建立您的个人情绪模型。
</div>
</div>
<div class="button">
<van-button
round
type="info"
style="width: 100%; height: 100%"
@click="toQuestion"
v-if="info.initScaleState !== 1"
>去完成</van-button
>
</div>
</div>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: 'PsychologicalModeling',
data() {
return {
info: null,
}
},
mounted() {
//页面标题
window.document.title = '情绪初始化建模'

//页面传参
let params = { ...this.$route.query }

if (params.uid) {
this.uid = params.uid

//初始化
this.init()
} else {
this.$toast('参数错误')
}
},
methods: {
async init() {
let re = await this.api('/api/Question/Progress', {
method: 'GET',
sslVerify: false,
withCredentials: false,
params: {
uid: this.uid,
},
})
if (re.success) {
if (re.response && re.response.state === -1) {
this.$toast('用户不存在或未绑定手表')
} else {
this.info = re.response
}
} else {
this.$toast(re.msg)
}
},
toQuestion() {
this.$router.push(`/PsychologicalQuestionnaire?uid=${this.uid}`)
},
api(url, config) {
let baseUrl = 'https://dbmq.rzliot.com/heart'
setTimeout(() => {
this.$toast.loading({
message: '',
forbidClick: true,
duration: 0,
})
}, 100)
return new Promise((res) => {
axios({
url: `${baseUrl}${url}`,
...config,
})
.then((re) => {
if (re) {
if (re.data) {
console.log(re.data)
res(re.data)
this.$toast.clear()
return
}
this.$toast(`信息获取失败-${re.status}`)
res(true)
this.$toast.clear()
return
}
this.$toast(`信息获取失败-${url}`)
res(true)
this.$toast.clear()
})
.catch((e) => {
this.$toast(`信息获取失败-${url}`)
res(true)
this.$toast.clear()
console.log(e)
})
})
},
},
}
</script>

<style lang="scss" scoped>
@font-face {
font-family: 'iconfont'; /* Project id 2652084 */
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA=');
}

.iconfont {
font-family: 'iconfont' !important;
// font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-caozuochenggong:before {
content: '\e60f';
}

.icon-tishi:before {
content: '\e654';
}

.page {
width: 100%;
min-height: 100%;
box-sizing: border-box;
font-size: 3.6vw;
text-align: left;
background: #f4f4f4;
padding-bottom: 30vw;

.tip {
display: flex;
font-size: 3.3vw;
padding: 6vw 4vw;
justify-content: space-between;
align-items: center;
background: white;

.icon {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
color: #ff865a;
font-size: 6vw;
border-radius: 50%;
background: #fff5f1;
}
.info {
width: calc(100% - 50px);
line-height: 20px;
text-align: left;
.titie {
color: #ff865a;
}
.content {
color: gray;
}
}
}

.step {
margin-top: 3vw;
padding: 4vw 8vw;
padding-right: 4vw;
background: white;

.name {
display: flex;
align-items: center;
font-size: 3.8vw;
padding-bottom: 2vw;

&::before {
content: '';
display: block;
width: 1vw;
height: 1vw;
border: 2px solid #638ee4;
border-radius: 50%;
margin-left: calc(-2vw - 4px);
margin-right: 1vw;
}
}
.title {
display: flex;
justify-content: space-between;
padding: 3vw 0;

.status {
color: #ff865a;
}
.success {
color: #638ee4;

.icon {
font-size: 4vw;
margin-right: 1vw;
}
}
}
.sub_title {
padding: 3vw 0;
color: gray;
}
}

.button {
position: fixed;
left: 0;
right: 0;
bottom: 15vw;
width: 75vw;
height: 14vw;
margin: auto;

.van-button--info {
background-color: #638ee4;
border: 1px solid #638ee4;
}
}
}
</style>

+ 341
- 0
src/views/psychological-questionnaire/index.vue View File

@@ -0,0 +1,341 @@
<template>
<div class="page" v-if="topic.length">
<div class="top">
<div class="schedule">
<div class="progress">
<van-progress
:percentage="
(select.length == 0 ? 0 : select.length / topic.length) * 100
"
stroke-width="10px"
color="#638ee4"
:show-pivot="false"
v-if="topic.length"
></van-progress>
</div>
<div class="text">
<span class="val">{{ select.length }}</span
>/<span class="total">{{ topic.length }}</span>
</div>
</div>
<div class="title">{{ title }}</div>
</div>
<div class="list_box">
<div class="item" v-for="(item, index) in topic" :key="index">
<div class="label">
<span>{{ item.Title }}</span>
<span>({{ item.Type }})</span>
</div>
<van-radio-group
class="radio"
v-model="item.select"
v-if="item.Type == '单选题'"
>
<van-cell-group>
<van-cell
clickable
v-for="(ite, idx) in item.Option"
:key="idx"
:title="ite.label"
@click="onRadio(index, ite.value)"
>
<template #right-icon>
<van-radio :name="ite.value" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
<van-checkbox-group class="checkbox" v-model="item.select" v-else>
<van-cell-group>
<van-cell
v-for="(ite, idx) in item.Option"
clickable
:key="idx"
:title="ite.label"
@click="onCheckbox(`checkboxes${item.QId}`, idx)"
>
<template #right-icon>
<van-checkbox
:name="ite.value"
:ref="`checkboxes${item.QId}`"
/>
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</div>
</div>
<div class="button">
<van-button
round
type="info"
:disabled="topic.length != select.length"
style="width: 100%; height: 100%"
@click="submit"
>提交问卷</van-button
>
</div>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: 'PsychologicalModeling',
data() {
return {
uid: '',
keyCode: '',
title: '',
topic: [], //题目列表
select: [],
}
},
mounted() {
//页面标题
window.document.title = '情绪初始化评估'

//页面传参
let params = { ...this.$route.query }

if (params.uid) {
this.uid = params.uid

//初始化
this.init()
} else {
this.$toast('参数错误')
}
},
watch: {
selects(val) {
let temp = JSON.parse(val)
let tempt = temp.filter((item) => {
if (item.select) {
return true
}
})
this.select = tempt
},
},
computed: {
selects() {
return JSON.stringify(this.topic)
},
},
methods: {
async init() {
let re = await this.api('/api/Question/Get', {
method: 'GET',
sslVerify: false,
withCredentials: false,
params: {
// uid: this.uid,
},
})
if (re.success) {
if (re.response && re.response.length) {
let temp = re.response[0]
let code = temp.Code
this.title = temp.Memo
this.keyCode = temp.Code
let re1 = await this.api('/api/Question/GetQuestion', {
method: 'GET',
sslVerify: false,
withCredentials: false,
params: {
code: code,
},
})
if (re1.success) {
if (re1.response && re1.response.length) {
let topic = []
re1.response.forEach((item) => {
let tempt = { ...item }
let a1 = tempt.Option.split('#&')
let option = []
for (let index = 0; index < a1.length; index++) {
option.push({
label: a1[index],
value: index + 1,
})
}
tempt.Option = option
tempt.value = ''
topic.push(tempt)
})
this.topic = topic
} else {
this.$toast('问卷暂无题目')
}
} else {
this.$toast(re1.msg)
}
} else {
this.$toast('问卷不存在')
}
} else {
this.$toast(re.msg)
}
},
async submit() {
let temp = {
uid: this.uid, //客户端系统用户id
keyCode: this.keyCode, //问卷编号
answer: [],
}
this.topic.forEach((item) => {
temp.answer.push({
qid: item.QId, //问卷题目编号
value:
typeof item.select == 'object'
? item.select.join(',')
: item.select, //用户所选答案的 id
})
})
let re = await this.api('/api/Question/Rsults', {
method: 'POST',
sslVerify: false,
withCredentials: false,
data: temp,
})
if (re.success) {
this.$toast('问卷提交成功', 3000)
setTimeout(() => {
window.history.back(-1)
}, 3000)
} else {
this.$toast(re.msg)
}
},
onRadio(index, value) {
let temp = { ...this.topic[index] }
temp.select = value
this.$set(this.topic, index, temp)
},
onCheckbox(key, index) {
try {
this.$refs[`${key}`][index].toggle()
} catch (error) {
console.log(error)
}
},
api(url, config) {
setTimeout(() => {
this.$toast.loading({
message: '',
forbidClick: true,
duration: 0,
})
}, 100)
let baseUrl = 'https://dbmq.rzliot.com/heart'
return new Promise((res) => {
axios({
url: `${baseUrl}${url}`,
...config,
})
.then((re) => {
if (re) {
if (re.data) {
console.log(re.data)
res(re.data)
this.$toast.clear()
return
}
this.$toast(`信息获取失败-${re.status}`)
res(true)
this.$toast.clear()
return
}
this.$toast(`信息获取失败-${url}`)
res(true)
this.$toast.clear()
})
.catch((e) => {
this.$toast(`信息获取失败-${url}`)
res(true)
this.$toast.clear()
console.log(e)
})
})
},
},
}
</script>

<style lang="scss" scoped>
.page {
width: 100%;
min-height: 100%;
box-sizing: border-box;
font-size: 3.6vw;
text-align: left;
background: #f4f4f4;
padding-bottom: 8vw;
padding-top: 24vw;

.top {
box-sizing: border-box;
position: fixed;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3vw;
width: 100vw;
height: 24vw;
background: white;
z-index: 99;

.schedule {
display: flex;
align-items: center;

.progress {
width: 85%;
}
.text {
width: 15%;
font-size: 4.5vw;
text-align: center;

.val {
font-size: 5vw;
font-weight: bold;
}
}
}
.title {
color: #638ee4;
}
}

.list_box {
width: 100%;
margin-top: 3vw;

.item {
margin-top: 3vw;
padding: 3vw;
background: white;

.label {
font-size: 4vw;
}
}
}

.button {
width: 75vw;
height: 14vw;
margin: 0 auto;
margin-top: 8vw;

.van-button--info {
background-color: #638ee4;
border: 1px solid #638ee4;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save