20 changed files with 2751 additions and 14 deletions
+ 111
- 1
README.md
View File
| @@ -1,7 +1,7 @@ | |||
| <!-- | |||
| * @Date: 2022-08-17 16:19:13 | |||
| * @LastEditors: JinxChen | |||
| * @LastEditTime: 2023-05-13 22:19:45 | |||
| * @LastEditTime: 2023-06-25 16:08:26 | |||
| * @FilePath: \TelpoH5FrontendWeb\README.md | |||
| * @description: 项目说明 | |||
| --> | |||
| @@ -425,3 +425,113 @@ feature | |||
| update | |||
| - 告警 | |||
| - 修改 误报文字为 免告警 | |||
| ## v1.0.52 | |||
| `2023.5.30` | |||
| feature | |||
| - 增加 心理监测详情页面，抑郁，压力和疲劳当天图表展示 | |||
| - 增加 echarts图表依赖 | |||
| - 王泽林 | |||
| - 增加 心理监测-问卷调查页面 | |||
| - 增加 心理监测-建模查询页面 | |||
| ## v1.0.53 | |||
| `2023.5.30` | |||
| update | |||
| - 心理监测详情页面 | |||
| - 增加 返回功能 | |||
| - 修改 页面标题 | |||
| ## v1.0.54 | |||
| `2023.5.31` | |||
| update | |||
| - 心理监测详情页面 | |||
| - 优化 图表显示内容，两边增加留白区域 | |||
| - 优化 7天和30天图表圆角柱形图展示 | |||
| ## v1.0.55 | |||
| `2023.5.31` | |||
| update | |||
| - 心理监测详情页面 | |||
| - 增加 动态填充uid | |||
| - 问卷调查页面 | |||
| - 修复 toast无限加载的问题 | |||
| ## v1.0.56 | |||
| `2023.6.1` | |||
| feature | |||
| - 增加 一个心理详情汇总页面 | |||
| ## v1.0.57 | |||
| `2023.6.1` | |||
| update | |||
| - 心理健康 | |||
| - 建模进度查询，问卷调查，心理详情汇总和心理健康抑郁，压力和疲劳详情页面 | |||
| - 增加 接口请求时带上从随手精灵传过来的token | |||
| ## v1.0.58 | |||
| `2023.6.7` | |||
| update | |||
| - ai语音告警 | |||
| - 增加 一个ai语音呼叫中间页 | |||
| - 增加 获取long_link的接口 | |||
| - vue.config.js | |||
| - 增加 关于ai水域告警接口跨域代理设置 | |||
| - 因项目接口地址不同，发布线上时取消ai水域告警接口跨域代理，仅在本地调试开启 | |||
| ## v1.0.59 | |||
| `2023.6.9` | |||
| update | |||
| - 加油包充值购买 | |||
| - 修改 支付成功提示 | |||
| ## v1.0.60 | |||
| `2023.6.14` | |||
| update | |||
| - 心理健康详情页面 | |||
| - 修复 历史监测选中非今天的日期后日期显示今天的问题 | |||
| - vue.config.js | |||
| - 注释 proxy代理相关代码 | |||
| ## v1.0.61 | |||
| `2023.6.16` | |||
| update | |||
| - 心理建模进度查询 | |||
| - 增加 返回按钮 | |||
| ## v1.0.62 | |||
| `2023.6.17` | |||
| feature | |||
| - 心理建模进度查询 | |||
| - 增加 具体返回url | |||
| ## v1.0.63 | |||
| `2023.6.19` | |||
| update | |||
| - 心理建模进度查询 | |||
| - 修改 返回逻辑 | |||
| ## v1.0.64 | |||
| `2023.6.21` | |||
| update | |||
| - 心理建模进度查询 | |||
| - 增加 建模中，有2个步骤，如果任一步骤已经完成，则该步骤可以隐藏显示。 | |||
| - 修复 图表时间格式转换错误的问题 | |||
| - 增加 Advice字段显示 | |||
| ## v1.0.65 | |||
| `2023.6.22` | |||
| update | |||
| - 心理监测详情 | |||
| - 今天趋势饼状图 | |||
| - 修改 百分比显示值，取小数点后面一位 | |||
| ## v1.0.66 | |||
| `2023.6.25` | |||
| update | |||
| - 心理监测详情 | |||
| - 增加 7天 和 30天数据查看功能 | |||
| - 优化 页面样式内容 | |||
| - 增加 返回到随手精灵逻辑 | |||
+ 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/moderate.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 1.9KB |
BIN
src/assets/img/no_data_01.png
View File
| Before | After |
|---|---|
|
|
| Width: 263 | Height: 165 | Size: 24KB |
BIN
src/assets/img/regardless.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 1.4KB |
+ 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-06-16 17:19:45 | |||
| * @FilePath: \TelpoH5FrontendWeb\src\config\models.js | |||
| * @description: | |||
| */ | |||
| export const VERSION_MODEL = '1.0.51F'; //版本号 | |||
| export const VERSION_MODEL = '1.0.66F'; //版本号 | |||
| 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 | |||
+ 27
- 1
src/router/index.js
View File
| @@ -1,7 +1,21 @@ | |||
| /* | |||
| * @Date: 2023-06-01 18:41:50 | |||
| * @LastEditors: JinxChen | |||
| * @LastEditTime: 2023-06-07 10:40:03 | |||
| * @FilePath: \TelpoH5FrontendWeb\src\router\index.js | |||
| * @description: | |||
| */ | |||
| /* | |||
| * @Date: 2023-05-30 15:37:06 | |||
| * @LastEditors: JinxChen | |||
| * @LastEditTime: 2023-06-01 09:48:23 | |||
| * @FilePath: \TelpoH5FrontendWeb\src\router\index.js | |||
| * @description: | |||
| */ | |||
| /* | |||
| * @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 +45,18 @@ 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) }, | |||
| // 健康-抑郁，压力和疲劳汇总入口 | |||
| { path: '/psychologicalMain', name: 'psychologicalMain', component: resolve => require(['@/views/health/psychological-main'], resolve) }, | |||
| // 告警详情-中间页 | |||
| { path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) }, | |||
| ]; | |||
| const router = new VueRouter({ | |||
+ 20
- 2
src/store/index.js
View File
| @@ -1,7 +1,7 @@ | |||
| /* | |||
| * @Date: 2022-08-17 16:18:02 | |||
| * @LastEditors: JinxChen | |||
| * @LastEditTime: 2023-02-25 15:23:43 | |||
| * @LastEditTime: 2023-06-19 11:26:22 | |||
| * @FilePath: \TelpoH5FrontendWeb\src\store\index.js | |||
| * @description: | |||
| */ | |||
| @@ -19,7 +19,9 @@ export default new Vuex.Store({ | |||
| wxAuthCode: '', | |||
| openId: '', | |||
| appId: '', | |||
| isFromWx: null | |||
| isFromWx: null, | |||
| ssjlToken: '', | |||
| fromSsjl: '', | |||
| }, | |||
| mutations: { | |||
| imei(state, imei) { | |||
| @@ -50,6 +52,14 @@ export default new Vuex.Store({ | |||
| state.isFromWx = isFromWx; | |||
| window.localStorage[prefix + 'isFromWx'] = isFromWx; | |||
| }, | |||
| ssjlToken(state, ssjlToken) { | |||
| state.ssjlToken = ssjlToken; | |||
| window.localStorage[prefix + 'ssjlToken'] = ssjlToken; | |||
| }, | |||
| fromSsjl(state, fromSsjl) { | |||
| state.fromSsjl = fromSsjl; | |||
| window.localStorage[prefix + 'fromSsjl'] = fromSsjl; | |||
| }, | |||
| }, | |||
| getters: { | |||
| imei: state => { | |||
| @@ -80,6 +90,14 @@ export default new Vuex.Store({ | |||
| if (state.isFromWx != '') return state.isFromWx; | |||
| return window.localStorage[prefix + 'isFromWx'] == null ? '' : window.localStorage[prefix + 'isFromWx']; | |||
| }, | |||
| ssjlToken: state => { | |||
| if (state.ssjlToken != '') return state.ssjlToken; | |||
| return window.localStorage[prefix + 'ssjlToken'] == null ? '' : window.localStorage[prefix + 'ssjlToken']; | |||
| }, | |||
| fromSsjl: state => { | |||
| if (state.fromSsjl != '') return state.fromSsjl; | |||
| return window.localStorage[prefix + 'fromSsjl'] == null ? '' : window.localStorage[prefix + 'fromSsjl']; | |||
| }, | |||
| }, | |||
| actions: {}, | |||
| modules: {} | |||
+ 77
- 0
src/views/ai-call-alarm/index.vue
View File
| @@ -0,0 +1,77 @@ | |||
| <template> | |||
| <div class="ai-call-container"></div> | |||
| </template> | |||
| <script> | |||
| import axios from 'axios'; | |||
| export default { | |||
| name:'', | |||
| data(){ | |||
| return { | |||
| code: '', | |||
| createTime: '', | |||
| } | |||
| }, | |||
| created() { | |||
| this.loadParams(); | |||
| }, | |||
| methods: { | |||
| loadParams() { | |||
| let params = this.$route.query; | |||
| if( params ) { | |||
| this.code = params.code; | |||
| this.getLongLink(); | |||
| } | |||
| }, | |||
| getLongLink() { | |||
| let reqParams = { | |||
| code: this.code | |||
| }; | |||
| let baseUrl = process.env.NODE_ENV === "production" ? 'https://ai.ssjlai.com' : 'https://id.ssjlai.com'; | |||
| //let reqUrl = '/api/id/getLongLink'; | |||
| let reqUrl = `${baseUrl}/watersoutboundapi/getLongLink`; | |||
| axios.get(reqUrl, { | |||
| params: { ...reqParams }, | |||
| }).then(res =>{ | |||
| const data = res.data.data; | |||
| if(data.length > 0) { | |||
| let longLink = ''; | |||
| // 把接口中关于随手精灵公众号的链接地址替换成h5的链接地址 | |||
| if(data[0].long_link.indexOf('ai.ssjlai.com/parentweb') > -1) { | |||
| // ai是正式环境 | |||
| longLink = data[0].long_link.replace('https://ai.ssjlai.com/parentweb/#/dangerAreaDetails', 'https://ai.ssjlai.com/h5-frontendweb/#/alarmDetails'); | |||
| } else if( data[0].long_link.indexOf('id.ssjlai.com/parentweb') > -1 ) { | |||
| // id是测试环境 | |||
| longLink = data[0].long_link.replace('https://id.ssjlai.com/parentweb/#/dangerAreaDetails', 'https://id.ssjlai.com/h5-frontendweb/#/alarmDetails'); | |||
| } else { | |||
| // 防止链接已经是h5的链接地址 | |||
| longLink = data[0].long_link; | |||
| } | |||
| const createTime = data[0].create_time; | |||
| // 13位时间戳 除以 1000 再取整 | |||
| const nowTime = (new Date().getTime() / 1000).toFixed(); | |||
| const twoHours = 7200; | |||
| if(nowTime - createTime > twoHours) { | |||
| // 增加过期失效判断，根据接口返回的创建时间与现在时间比较，超过两个小时提示链接过期并且不再跳转 | |||
| this.$dialog.confirm({ | |||
| message: '链接已失效', | |||
| showCancelButton: false | |||
| }) | |||
| } else { | |||
| window.open(longLink); | |||
| } | |||
| } else { | |||
| this.$dialog.confirm({ | |||
| message: '参数错误', | |||
| showCancelButton: false | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| </style> | |||
+ 98
- 0
src/views/health/psychological-main/index.scss
View File
| @@ -0,0 +1,98 @@ | |||
| .psychological-main-container { | |||
| height: 100vh; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| background-color: #F4F8FB; | |||
| .nav-bar-title { | |||
| display: flex; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| } | |||
| .main { | |||
| height: calc(100vh - 45px); | |||
| background-color: #F4F8FB; | |||
| padding: 15px; | |||
| .list { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| background-color: #FFFFFF; | |||
| border-radius: 15px; | |||
| padding: 10px; | |||
| .item { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-start; | |||
| flex-direction: column; | |||
| height: 103px; | |||
| width: 93px; | |||
| /* margin: 0 5px; | |||
| padding: 5px; */ | |||
| padding: 5px; | |||
| border-radius: 10px; | |||
| &.depression { | |||
| background: linear-gradient(-29deg, #F2F9FE, #D7E8FD); | |||
| } | |||
| &.stress { | |||
| background: linear-gradient(-29deg, #F9E2E6, #FEF8F4); | |||
| } | |||
| &.tiredness { | |||
| background: linear-gradient(-29deg, #FDFBEE, #FAE4CC); | |||
| } | |||
| p { | |||
| font-size: 16px; | |||
| } | |||
| .health-value { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| } | |||
| .health-name { | |||
| color: #282828; | |||
| font-size: 14px; | |||
| } | |||
| .health-result { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .left { | |||
| @include center(); | |||
| border-radius: 8px; | |||
| padding: 2px 5px; | |||
| margin: 6px 0; | |||
| &.depression { | |||
| background: #BCCDE5; | |||
| } | |||
| &.stress { | |||
| background: #F0D1D4; | |||
| } | |||
| &.tiredness { | |||
| background: #EAD9C5; | |||
| } | |||
| .result { | |||
| font-size: 12px; | |||
| color: #ffffff; | |||
| } | |||
| } | |||
| .right { | |||
| @include center(); | |||
| img { | |||
| height: 18px; | |||
| width: 18px; | |||
| margin-left: 3px | |||
| } | |||
| } | |||
| } | |||
| .health-time { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: flex-start; | |||
| .time { | |||
| font-size: 12px; | |||
| color: #8B8B8B; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 160
- 0
src/views/health/psychological-main/index.vue
View File
| @@ -0,0 +1,160 @@ | |||
| <template> | |||
| <div class="psychological-main-container"> | |||
| <van-nav-bar title="今日情绪" :border="true" @click-left="onNavBack"> | |||
| <template #left> | |||
| <div v-show="isShowLeft" class="nav-bar-title"> | |||
| <van-icon name="arrow-left" size="23"/><span>返回</span> | |||
| </div> | |||
| </template> | |||
| <template #title> | |||
| <span>今日情绪</span> | |||
| </template> | |||
| </van-nav-bar> | |||
| <div class="main"> | |||
| <div class="list"> | |||
| <div v-for="(item,index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)"> | |||
| <p class="health-value" :style="{ color: calcColor(item.value) }"> | |||
| {{ item.value || '--' }} | |||
| </p> | |||
| <p class="health-name"> | |||
| {{ item.name || '--'}} | |||
| </p> | |||
| <div class="health-result"> | |||
| <div :class="['left', item.class]"> | |||
| <p class="result"> | |||
| {{ item.result || '暂无数据'}} | |||
| </p> | |||
| </div> | |||
| <div class="right"> | |||
| <!-- img --> | |||
| <img :src="item.img" alt=""> | |||
| </div> | |||
| </div> | |||
| <div class="health-time"> | |||
| <p class="time">{{ item.time || '--' }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import axios from "axios"; | |||
| export default { | |||
| name: 'psychologicalMain', | |||
| data(){ | |||
| return { | |||
| healhtList: [ | |||
| /* { value: 40, name: '抑郁倾向', class: 'depression',result: '无抑郁倾向', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||
| { value: 55, name: '压力', class: 'stress', result: '轻度压力', time: '17:52', img: require('@/assets/img/regardless.png') }, | |||
| { value: 75, name: '疲劳', class: 'tiredness', result: '中度疲劳', time: '17:52', img: require('@/assets/img/moderate.png') }, */ | |||
| ], | |||
| uid: '', | |||
| } | |||
| }, | |||
| computed: { | |||
| isShowLeft() { | |||
| return this.$route.query.fromUrl !== undefined; | |||
| } | |||
| }, | |||
| created() { | |||
| this.loadParams(); | |||
| this.getHomeData(); | |||
| }, | |||
| mounted() { | |||
| window.document.title = '心理监测'; | |||
| }, | |||
| methods: { | |||
| loadParams() { | |||
| let params = this.$route.query; | |||
| if (params) { | |||
| this.uid = params.uid; | |||
| } | |||
| }, | |||
| getHomeData() { | |||
| this.$toast.loading('数据加载中'); | |||
| console.log("this.$store.getters.ssjlToken", this.$store.getters.ssjlToken); | |||
| let reqUrl = `https://dbmq.rzliot.com/heart/api/Data/GetHomeData`; | |||
| let reqParams = { | |||
| uid: this.uid, | |||
| date: this.$dayjs(new Date()).format('YYYY-MM-DD') | |||
| }; | |||
| axios.get(reqUrl, { | |||
| params: { ...reqParams }, | |||
| headers: { 'AuthToken': this.$store.getters.ssjlToken } | |||
| }).then(res => { | |||
| console.log("res", res); | |||
| const data = res.data.response; | |||
| this.healhtList = [ | |||
| // 抑郁 | |||
| { value: data.DepScore, name: '抑郁倾向', class: 'depression', result: data.DepDesc, time: data.DepMeasureTime ? this.$dayjs(data.DepMeasureTime).format('HH:mm'): '', level: data.DepLevel, img: this.calcImg(data.DepLevel) }, | |||
| // 压力 | |||
| { value: data.StressScore, name: '压力', class: 'stress', result: data.StressDesc, time: data.StressMeasureTime ? this.$dayjs(data.StressMeasureTime).format('HH:mm') : '', level: data.StressLevel, img: this.calcImg(data.StressLevel) }, | |||
| // 疲劳 | |||
| { value: data.TirScore, name: '疲劳', class: 'tiredness', result: data.TirDesc, time: data.TirMeasureTime ? this.$dayjs(data.TirMeasureTime).format('HH:mm') : '', level: data.TirLevel, img: this.calcImg(data.TirLevel) }, | |||
| ]; | |||
| this.$toast.success('数据加载完成'); | |||
| }).catch(() =>{}).finally(() => { this.$toast.clear() }) | |||
| }, | |||
| onClick(item) { | |||
| this.$router.push({ | |||
| name: 'psychological', | |||
| query: { | |||
| name: item.class, | |||
| uid: this.uid | |||
| } | |||
| }) | |||
| }, | |||
| onNavBack() { | |||
| if(this.isShowLeft && this.$route.query.fromUrl !== undefined) { | |||
| window.location.href = `${this.$route.query.fromUrl}/#/device`; | |||
| } else { | |||
| this.$router.go(-1); | |||
| } | |||
| }, | |||
| // 计算表情 | |||
| calcImg(level) { | |||
| let imgUrl = ''; | |||
| switch(level) { | |||
| case '0': | |||
| imgUrl = require('@/assets/img/regardless.png'); | |||
| break; | |||
| case '1': | |||
| imgUrl = require('@/assets/img/regardless.png'); | |||
| break; | |||
| case '2': | |||
| imgUrl = require('@/assets/img/moderate.png'); | |||
| break; | |||
| case '3': | |||
| imgUrl = require('@/assets/img/moderate.png'); | |||
| break; | |||
| } | |||
| return imgUrl; | |||
| }, | |||
| // 计算颜色 | |||
| calcColor(value) { | |||
| let color = ""; | |||
| if (value <= 40) { | |||
| color = "#62BD48"; | |||
| } else if (value > 40 && value <= 65) { | |||
| color = "#FEC350"; | |||
| } else if (value > 65 && value <= 80) { | |||
| color = "#F86825"; | |||
| } else if (value > 80) { | |||
| color = "#EB1D15"; | |||
| } else { | |||
| color = ""; | |||
| } | |||
| return color; | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| @import "./index.scss"; | |||
| </style> | |||
+ 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: 0 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: 16px 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: 15px; | |||
| 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: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .statistics { | |||
| position: relative; | |||
| padding: 10px 14px; | |||
| .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; | |||
| } | |||
| } | |||
+ 1166
- 0
src/views/health/psychological/index.vue
File diff suppressed because it is too large
View File
+ 2
- 1
src/views/package-buy/index.vue
View File
| @@ -356,8 +356,9 @@ export default { | |||
| //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 | |||
| if(packageType === 1) { | |||
| // 加油包不用跳转，直接提示支付成功 | |||
| // 2023.06.09 修改充值成功提示如下: | |||
| that.$toast.success({ | |||
| message: '支付成功' | |||
| message: '充值成功，请重启设备后，恢复正常使用。' | |||
| }); | |||
| } else { | |||
| that.$router.replace({ | |||
+ 321
- 0
src/views/psychological-modeling/index.vue
View File
| @@ -0,0 +1,321 @@ | |||
| <template> | |||
| <div class="page" v-show="isSHowPage"> | |||
| <van-nav-bar title="" :border="true" :left-arrow="true" @click-left="onNavBack" v-if="showLeftArrow"> | |||
| <template #left> | |||
| <van-icon name="arrow-left" size="23" style="padding: 0"/>返回 | |||
| </template> | |||
| </van-nav-bar> | |||
| <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" v-show="info.progress !== 1"> | |||
| <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" v-show="info.initScaleState !== 1"> | |||
| <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, | |||
| showLeftArrow: null, | |||
| isSHowPage: false, | |||
| fromUrl: '', | |||
| } | |||
| }, | |||
| mounted() { | |||
| //页面标题 | |||
| window.document.title = '情绪初始化建模' | |||
| //页面传参 | |||
| let params = { ...this.$route.query } | |||
| if (params.uid) { | |||
| this.uid = params.uid; | |||
| // 缓存从随手精灵传过来的token | |||
| this.$store.commit('ssjlToken', params.token); | |||
| // 缓存从随手精灵传过来的标识 | |||
| this.$store.commit('fromSsjl', params.fromSsjl); | |||
| // 是否显示 返回标签 | |||
| this.showLeftArrow = this.$store.getters.fromSsjl === 'true'; | |||
| this.fromUrl = params.fromUrl; | |||
| console.log("fromUrl", this.fromUrl); | |||
| //初始化 | |||
| this.init() | |||
| } else { | |||
| this.$toast('参数错误') | |||
| } | |||
| }, | |||
| methods: { | |||
| onNavBack() { | |||
| let fromSsjl = this.$store.getters.fromSsjl === 'true'; | |||
| if(fromSsjl) { | |||
| let baseUrl = this.fromUrl; | |||
| window.location.href = `${baseUrl}/#/device`; | |||
| } else { | |||
| this.$router.go(-1); | |||
| } | |||
| }, | |||
| async init() { | |||
| let ssjlToken = this.$store.getters.ssjlToken; | |||
| let re = await this.api('/api/Question/Progress', { | |||
| method: 'GET', | |||
| sslVerify: false, | |||
| withCredentials: false, | |||
| params: { | |||
| uid: this.uid, | |||
| }, | |||
| }, ssjlToken) | |||
| if (re.success) { | |||
| if (re.response && re.response.state === -1) { | |||
| this.$toast('用户不存在或未绑定手表') | |||
| } else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1) { | |||
| // 2023.6.1 需求变更，建模完成直接跳到心理健康汇总页面 | |||
| this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl}`); | |||
| } else { | |||
| this.info = re.response | |||
| } | |||
| } else { | |||
| this.$toast(re.msg) | |||
| } | |||
| setTimeout(() => { | |||
| this.isSHowPage = true; | |||
| }, 800) | |||
| }, | |||
| toQuestion() { | |||
| this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`) | |||
| }, | |||
| api(url, config, token) { | |||
| 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, | |||
| // 增加请求头部 token | |||
| headers: { | |||
| 'AuthToken': token | |||
| } | |||
| }) | |||
| .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> | |||
+ 345
- 0
src/views/psychological-questionnaire/index.vue
View File
| @@ -0,0 +1,345 @@ | |||
| <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, | |||
| }, | |||
| }, this.$store.getters.ssjlToken) | |||
| 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, | |||
| }, | |||
| }, this.$store.getters.ssjlToken) | |||
| 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, | |||
| }, this.$store.getters.ssjlToken) | |||
| 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, token) { | |||
| setTimeout(() => { | |||
| this.$toast.loading({ | |||
| message: '', | |||
| forbidClick: true, | |||
| duration: 1500, | |||
| }) | |||
| }, 100) | |||
| let baseUrl = 'https://dbmq.rzliot.com/heart' | |||
| return new Promise((res) => { | |||
| axios({ | |||
| url: `${baseUrl}${url}`, | |||
| ...config, | |||
| // 增加请求头部 token | |||
| headers: { | |||
| 'AuthToken': token | |||
| } | |||
| }) | |||
| .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> | |||
+ 19
- 2
vue.config.js
View File
| @@ -1,7 +1,7 @@ | |||
| /* | |||
| * @Author: your name | |||
| * @Date: 2020-04-15 10:00:32 | |||
| * @LastEditTime: 2023-02-26 09:19:56 | |||
| * @LastEditTime: 2023-06-14 17:10:10 | |||
| * @LastEditors: JinxChen | |||
| * @Description: In User Settings Edit | |||
| * @FilePath: \TelpoH5FrontendWeb\vue.config.js | |||
| @@ -14,7 +14,24 @@ const pxtorem = require('postcss-pxtorem'); // 把代码中px转为rem | |||
| const CompressionPlugin = require("compression-webpack-plugin"); | |||
| const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port | |||
| /* const proxy = process.env.NODE_ENV === 'development' ?{ | |||
| // 调试完毕需要把这个代理注释掉，否则发布到线上会有问题产生 | |||
| '/api/id': { | |||
| target: 'https://id.ssjlai.com/watersoutboundapi/', | |||
| changeOrigin: true, | |||
| pathRewrite: { | |||
| '^/api/id': '' | |||
| } | |||
| }, | |||
| '/api/ai': { | |||
| target: 'https://ai.ssjlai.com/watersoutboundapi/', | |||
| changeOrigin: true, | |||
| pathRewrite: { | |||
| '^/api/ai': '' | |||
| } | |||
| } | |||
| } | |||
| : null; */ | |||
| module.exports = { | |||
| // 注意： 多页面配置 不再使用全路径，单页面时可以开启 | |||
| publicPath: './', | |||
Loading…