Merge branch 'develop' into test

README.md

@@ -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图表依赖
+- 王泽林
+    - 增加 心理监测-问卷调查页面
+    - 增加 心理监测-建模查询页面

package-lock.json

@@ -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=="
+        }
+      }
     }
   }
 }

package.json

@@ -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",

src/assets/css/public.scss

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

src/config/models.js

@@ -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
+    }
+};

src/main.js

@@ -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

src/router/index.js

@@ -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({

src/views/health/psychological/index.scss

@@ -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;
+    }
+}

src/views/psychological-modeling/index.vue

@@ -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>

src/views/psychological-questionnaire/index.vue

@@ -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>