From 4ecea1c14b7e2ac19561aa384efc386e99419c51 Mon Sep 17 00:00:00 2001 From: JinxChen <2183691628@qq.com> Date: Tue, 4 Jul 2023 14:36:12 +0800 Subject: [PATCH] =?UTF-8?q?update=20-=20=E5=BF=83=E7=90=86=E7=9B=91?= =?UTF-8?q?=E6=B5=8B=E8=AF=A6=E6=83=85=20=20=20=20=20-=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=EF=BC=8C?= =?UTF-8?q?=E6=8A=8A=E5=9B=BE=E8=A1=A8=E5=AE=8C=E6=95=B4=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=9C=A8=E9=A1=B5=E9=9D=A2=E4=B8=8A=20=20=20=20=20-=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E9=97=AE=E5=8F=B7=E5=B8=AE=E5=8A=A9?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=96=87=E5=AD=97=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++- src/config/models.js | 26 ++++- src/views/health/psychological/index.scss | 81 ++++++++++++--- src/views/health/psychological/index.vue | 120 +++++++++++++++++----- 4 files changed, 194 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index b5daa75..772a2ac 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -597,4 +597,12 @@ update - 修复 圆环图表的等级展示出现换行的问题 - 修复 选择历史监测数据后，界面还是显示：今天的问题 - 修复 轻度疲劳图标显示不正确的问题 - - 取消 日历组件星期显示 \ No newline at end of file + - 取消 日历组件星期显示 + + +## v1.0.74 +`2023.7.4` +update +- 心理监测详情 + - 优化 页面显示，把图表完整显示在页面上 + - 增加 问号帮助提示文字说明 \ No newline at end of file diff --git a/src/config/models.js b/src/config/models.js index a3c39ec..f1c9110 100644 --- a/src/config/models.js +++ b/src/config/models.js @@ -1,11 +1,11 @@ /* * @Date: 2021-11-20 10:26:39 * @LastEditors: JinxChen - * @LastEditTime: 2023-06-16 17:19:45 + * @LastEditTime: 2023-07-04 14:08:47 * @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @description: */ -export const VERSION_MODEL = '1.0.73F'; //版本号 +export const VERSION_MODEL = '1.0.74F'; //版本号 export const IMAGE_URL = { production: 'http://zfb.ssjlai.com/web/', test: 'http://zfb.ssjlai.com/web/', @@ -29,16 +29,32 @@ export const EmotionModel = { // 抑郁 depression: { name: '抑郁', - type: 2 + type: 2, + title1: '抑郁倾向', + article1: `

心晴表所检测的是个体的抑郁倾向。通过将个人的生理特征（脉搏波、心率变异性等）和行为习惯（运动、作息等）与临床诊断为抑郁症的患者的相应特征进行对比，判断出个体的抑郁倾向（即抑郁症的可能性）程度。抑郁倾向持续的时间越长、程度越严重，代表患有抑郁症的风险就越大。

`, + title2: '抑郁倾向算法原理', + article2: `

1．研究发现，抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化，因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。

+

2．抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱，算法能够有效分析判断出这些异常的行为特征。

` + }, // 压力 stress: { name: '压力', - type: 1 + type: 1, + title1: '压力', + article1: `

心理压力是指个体面对实际上的或认识上的至关重要的环境要求时，产生的通过各种生理和心理反应表现出来的身心紧张状态，也被称为心理应激。在心理学中，压力或应激一般指紧张感和压力感。

`, + title2: '压力算法原理', + article2: `

压力的生理反应可以涉及全身各个系统和器官，大脑皮质通过自主神经系统传递关于血管压力的感觉信号，这部分感受器可以感知应激反应带来的血压波动，发挥感受压力的作用。心晴表通过脉搏波显性反馈压力血氧反应指数，从而更加科学的判断个体的压力水平。

`, }, // 疲劳 tiredness: { name: '疲劳', - type: 3 + type: 3, + title1: '疲劳', + article1: `

疲劳分为两类「生理疲劳」和「心理疲劳」。两者有本质区别，前者是：心里想做但身体无力，后者是：身体有力但心里不想做。

+

生理疲劳：人体因生理状态而产生的困倦和技能失调的现象，指工作活动主要由身体肌肉承担产生的疲劳，又称肌肉疲劳、体力疲劳。

+

心理疲劳：长期、单调、高压力的工作引发的力竭性心理反应，又被称为心理耗竭。主要指肌肉工作强度不大，由于工作中信息加工要求较高和情绪压力较大，或由于工作过于单调而产生的疲劳。

`, + title2: '疲劳算法原理', + article2: `

心情表的疲劳值是生理疲劳和心理疲劳的综合值，主要通过个体日常生活中的心率，心率变异性的变化及运动体力的变化情况来进行科学计算而来。

`, } }; \ No newline at end of file diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss index 3fc5d91..226709d 100644 --- a/src/views/health/psychological/index.scss +++ b/src/views/health/psychological/index.scss @@ -9,12 +9,11 @@ $newBlue: #638EE4; overflow: scroll; .top { flex: 1; - .tab-bar { - padding: 0 13px 0 13px; + padding: 0 13px 5px 13px; .date-tab-con { - padding: 10px 0; - height: 35px; + padding: 5px 0; + height: 30px; display: flex; justify-content: flex-start; align-items: center; @@ -26,7 +25,7 @@ $newBlue: #638EE4; border-radius: 15px; color: #fff; .date-tab-item { - height: 35px; + height: 30px; width: 100%; color: #6D6D6D; font-size: 18px; @@ -57,10 +56,14 @@ $newBlue: #638EE4; display: flex; justify-content: space-between; align-items: center; - padding: 16px 16px 16px 13px; + padding: 0px 16px 10px 13px; font-size: 18px; .title-left { font-weight: bold; + .van-icon { + margin-left: 5px; + font-size: 18px; + } } } .monitoring-count { @@ -74,13 +77,13 @@ $newBlue: #638EE4; } .pie-chart-con { flex: 1; - padding: 17px 0 45px 0; + padding: 5px 0 10px 0; display: flex; justify-content: space-between; align-items: flex-start; .pie-chart-left { position: relative; - height: 180px; + height: 150px; padding-left: 15px; width: 35%; @include center(); @@ -90,7 +93,7 @@ $newBlue: #638EE4; } } .pie-chart-right { - height: 180px; + height: 150px; width: 65%; padding-right: 20px; @include center(); @@ -131,7 +134,7 @@ $newBlue: #638EE4; } .statistics { position: relative; - padding: 10px 14px; + padding: 0px 14px 5px 14px; .list { flex: 1; width: 100%; @@ -150,7 +153,7 @@ $newBlue: #638EE4; .middle { font-size: 24px; font-weight: bold; - padding: 16px 5px 11px 5px; + padding: 5px; } .bottom { font-size: 9px @@ -167,11 +170,11 @@ $newBlue: #638EE4; .bottom { flex: 1; .echart-container { - height: 400px; + height: 250px; background-color:#fff; padding: 0 5px; .echart { - height: 400px; + height: 250px; padding: 0 5px; } } @@ -179,7 +182,7 @@ $newBlue: #638EE4; height: 11px; width: 100%; background-color: $lineGray; - margin-top: 30px; + margin-top: 10px; } .result { .result-con { @@ -215,6 +218,7 @@ $newBlue: #638EE4; .title-emo { font-size: 24px; padding: 14px 0 21px 0; + text-align: left; } .no-data { height: 250px; @@ -309,4 +313,53 @@ $newBlue: #638EE4; .title { font-size: 16px; } + .van-popup { + flex: 1; + max-height: 600px; + width: 100%; + background-color: $background; + } + .popup { + /* height: 100%; + width: 100%; */ + background-color: $background; + padding: 20px; + .item { + flex: 1; + padding: 10px; + margin: 15px 0; + text-align: left; + font-size: 14px; + background-color: #fff; + border-radius: 10px; + p { + margin: 5px 0; + } + h5 { + margin: 5px 0; + font-size: 16px; + } + &.first { + padding-top: 0; + } + &.science-tips { + .tips { + width: 60px; + height: 20px; + color: #fff; + @include center(); + background-color: red; + border-top-left-radius: 20px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + } + } + .van-button { + height: 40px; + background-color: $newBlue; + color: #fff; + border-radius: 20px; + } + } } \ No newline at end of file diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index ebb0e26..ae66e6f 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -25,7 +25,7 @@
-
{{ titleLeft }}
+
{{ titleLeft }}

历史监测

@@ -148,16 +148,14 @@ {{ advice }}
-
+

友情提示：

- - 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 + 如果您发现抑郁倾向分值升高或处于轻度水平，不需要过度紧张，这可能是由正常的情绪波动或者生活习惯（睡眠时间、运动量等）的改变造成的。如果您发现抑郁倾向分值连续7天及以上处于中度或重度水平，建议您寻求家人朋友或心理咨询师的帮助，及早进行干预。

温馨提示：

- - 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 + {{ warmTips }}
@@ -190,6 +188,24 @@ + + +
+
+
小科普
+

抑郁症是一种心理疾病，严重时可发展为精神障碍。然而当我们体会到了痛苦、悲伤、和郁闷等负面情绪，并不意味着我们就是抑郁症。日常的短时的喜、怒、哀、乐，都是正常的情绪变化，然而长期的低落情绪、兴趣缺失等可能会让我们有抑郁的风险。

+
+
+
+
+
+
+
+
+
+ 返回 +
+ @@ -250,8 +266,6 @@ export default { { label: "最小值", value: "40", time: "10:15" }, { label: "最近值", value: "50", time: "18:15" } */ ], - // 折线图标题 - echartsTitle: "", // 周报-情绪计算 emotionList: [ /* { days: "5", text: "无情绪倾向", color: "#62BD48" }, @@ -294,8 +308,6 @@ export default { defaultSeries: null, // 非日报折线图 Series 配置 weekAndMonthSeries: null, - // 当前情绪颜色 - currentColor: null || "#62BD48", // 当前情绪类型 emoType: null, // 结果解读 @@ -313,7 +325,9 @@ export default { advice: '', surveyTitle: '' || '本周概览', routeDate: '', - params: {} + params: {}, + isPopup: false, + resultLevel: '' }; }, computed: { @@ -330,7 +344,7 @@ export default { bottom: 20, top: "3%", textStyle: { - fontSize: 18, + fontSize: 16, fontWeight: "bold" } }, @@ -342,7 +356,7 @@ export default { bottom: "3%", itemHeight: 10, itemWidth: 10, - itemGap: 10, + itemGap: 5, align: 'auto', selectedMode: false, data: [ @@ -406,7 +420,7 @@ export default { top: '20%', left: '3%', right: '5%', - bottom: '15%', + bottom: '10%', containLabel: true }, xAxis: { @@ -430,22 +444,22 @@ export default { showMinLabel: true, //显示最小值 showMaxLabel: true, //显示最大值 nameLocation: 'center', - boundaryGap: ['20%', '20%'], + /* boundaryGap: ['5%', '5%'], */ axisLabel: { show: true, fontSize: 12, /* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距 - margin: 10, + /* margin: 10, */ /* verticalAlign: "bottom" */ }, data: this.xAxisData }, dataZoom: [ - { + /* { type: "inside", start: 0, end: 100, - }, + }, */ { start: 0, end: 100, @@ -454,8 +468,8 @@ export default { fontSize: 14 }, show: true, - /* height: 18, */ - bottom: 20, + height: 15, + bottom: 5, handleStyle: { borderWidth: 1, borderCap: "square" @@ -475,6 +489,8 @@ export default { max: 100, min: 0, interval: 20, + splitNumber : 1, + boundaryGap : [ '20%', '20%' ], nameTextStyle: { fontSize: 13 }, @@ -485,7 +501,7 @@ export default { axisLabel: { show: true, fontSize: 13, - margin: 10 + /* margin: 10 */ }, splitLine: { show: true, @@ -499,7 +515,7 @@ export default { { name: `无${this.emoName}倾向`, type: "line", - padding: 10, + padding: 5, data: this.emotionData, symbol: "circle", symbolSize: 8, // 拐点圆的大小 @@ -603,7 +619,36 @@ export default { today = this.$dayjs(this.selectDate || this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; } return `${today}${this.emoName}倾向${text}`; - } + }, + // 折线图标题 + echartsTitle() { + let today = ''; + if(this.currentDays !== 0) { + today = ''; + } else { + today = this.$dayjs(this.selectDate || this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; + } + return `${today}${this.emoName}数据图`; + }, + warmTips() { + return `正常连续佩戴手表，每半小时计算一个${this.emoName}分值，睡眠期间不进行计算。` + }, + title1() { + return EmotionModel[this.params.name].title1; + }, + article1() { + return EmotionModel[this.params.name].article1; + }, + title2() { + return EmotionModel[this.params.name].title2; + }, + article2() { + return EmotionModel[this.params.name].article2; + }, + // 当前情绪颜色 + currentColor( ) { + return this.calcResultColor(this.resultLevel) || "#62BD48" + }, }, watch: { // 监听数据发生变化 初始化各项图表 @@ -851,6 +896,7 @@ export default { } // 结果解读 this.result = data.Result; + this.resultLevel = data.ResultLevel; this.advice = data.Advice; this.$toast.loading({ message: '数据加载完成' @@ -874,7 +920,6 @@ export default { let text = this.emoName === 'depression' ? '趋势' : ''; let today = this.$dayjs(this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; this.result = `无${this.emoName}倾向`; - this.echartsTitle = `${today}${this.emoName}数据图`; this.defaultSeries = [ { name: `无${this.emoName}倾向`, @@ -1145,6 +1190,33 @@ export default { color = ""; } return color; + }, + // 计算结果采用哪种颜色 + calcResultColor(value) { + let color = ""; + switch(value) { + case '0': + color = "#62BD48"; + break; + case '1': + color = "#FEC350"; + break; + case '2': + color = "#F86825"; + break; + case '3': + color = "#EB1D15"; + break; + } + return color; + }, + // 点击帮助 + onHelp() { + this.isPopup = true; + }, + // 关闭poup + onClose() { + this.isPopup = false; } } };