update

- 心理监测详情
    - 优化 页面显示，把图表完整显示在页面上
    - 增加 问号帮助提示文字说明

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-06-30 09:30:30
+ * @LastEditTime: 2023-07-04 14:36:02
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -597,4 +597,12 @@ update
     - 修复 圆环图表的等级展示出现换行的问题
     - 修复 选择历史监测数据后，界面还是显示：今天的问题
     - 修复 轻度疲劳图标显示不正确的问题
-    - 取消 日历组件星期显示
+    - 取消 日历组件星期显示
+
+
+## v1.0.74
+`2023.7.4`
+update
+- 心理监测详情
+    - 优化 页面显示，把图表完整显示在页面上
+    - 增加 问号帮助提示文字说明

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: `<p>心晴表所检测的是个体的抑郁倾向。通过将个人的生理特征（脉搏波、心率变异性等）和行为习惯（运动、作息等）与临床诊断为抑郁症的患者的相应特征进行对比，判断出个体的抑郁倾向（即抑郁症的可能性）程度。抑郁倾向持续的时间越长、程度越严重，代表患有抑郁症的风险就越大。</p>`,
+        title2: '抑郁倾向算法原理',
+        article2: `<p>1．研究发现，抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化，因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p>
+        <p>2．抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱，算法能够有效分析判断出这些异常的行为特征。</p>`
+
     },
     // 压力
     stress: {
         name: '压力',
-        type: 1
+        type: 1,
+        title1: '压力',
+        article1: `<p>心理压力是指个体面对实际上的或认识上的至关重要的环境要求时，产生的通过各种生理和心理反应表现出来的身心紧张状态，也被称为心理应激。在心理学中，压力或应激一般指紧张感和压力感。</p>`,
+        title2: '压力算法原理',
+        article2: `<p>压力的生理反应可以涉及全身各个系统和器官，大脑皮质通过自主神经系统传递关于血管压力的感觉信号，这部分感受器可以感知应激反应带来的血压波动，发挥感受压力的作用。心晴表通过脉搏波显性反馈压力血氧反应指数，从而更加科学的判断个体的压力水平。</p>`,
     },
      // 疲劳
     tiredness: {
         name: '疲劳',
-        type: 3
+        type: 3,
+        title1: '疲劳',
+        article1: `<p>疲劳分为两类「生理疲劳」和「心理疲劳」。两者有本质区别，前者是：心里想做但身体无力，后者是：身体有力但心里不想做。</p>
+        <p>生理疲劳：人体因生理状态而产生的困倦和技能失调的现象，指工作活动主要由身体肌肉承担产生的疲劳，又称肌肉疲劳、体力疲劳。</p>
+        <p>心理疲劳：长期、单调、高压力的工作引发的力竭性心理反应，又被称为心理耗竭。主要指肌肉工作强度不大，由于工作中信息加工要求较高和情绪压力较大，或由于工作过于单调而产生的疲劳。</p>`,
+        title2: '疲劳算法原理',
+        article2: `<p>心情表的疲劳值是生理疲劳和心理疲劳的综合值，主要通过个体日常生活中的心率，心率变异性的变化及运动体力的变化情况来进行科学计算而来。</p>`,
     }
 };

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

src/views/health/psychological/index.vue

@@ -25,7 +25,7 @@
                 </div>
                 <!-- 标题 -->
                 <div class="title">
-                    <div class="title-left">{{ titleLeft }}</div>
+                    <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp"/></div>
                     <div class="title-right" v-show="currentDays === 0">
                         <p @click="onHistory">历史监测</p>
                     </div>
@@ -148,16 +148,14 @@
                             <span class="font-28"><!-- 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 -->{{ advice }}</span>
                         </div>
 
-                        <div class="friendly-reminder">
+                        <div class="friendly-reminder" v-if="emoType === 2">
                             <p :style="{color: currentColor}">友情提示：</p>
-
-                            <span>继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。</span>
+                            <span>如果您发现抑郁倾向分值升高或处于轻度水平，不需要过度紧张，这可能是由正常的情绪波动或者生活习惯（睡眠时间、运动量等）的改变造成的。如果您发现抑郁倾向分值连续7天及以上处于中度或重度水平，建议您寻求家人朋友或心理咨询师的帮助，及早进行干预。</span>
                         </div>
 
                         <div class="warm-reminder">
                             <p :style="{color: currentColor}">温馨提示：</p>
-
-                            <span>继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。</span>
+                            <span>{{ warmTips }}</span>
                         </div>
                     </div>
 
@@ -190,6 +188,24 @@
                 <!--  -->
             </div>
         </div>
+        <!-- 弹出层 -->
+        <van-popup v-model="isPopup">
+            <div class="popup">
+                <div class="item science-tips first" v-if="emoType === 2">
+                    <div class="tips"><h5>小科普</h5></div>
+                    <p>抑郁症是一种心理疾病，严重时可发展为精神障碍。然而当我们体会到了痛苦、悲伤、和郁闷等负面情绪，并不意味着我们就是抑郁症。日常的短时的喜、怒、哀、乐，都是正常的情绪变化，然而长期的低落情绪、兴趣缺失等可能会让我们有抑郁的风险。</p>
+                </div>
+                <div class="item" >
+                    <h5 v-html="title1"></h5>
+                    <div v-html="article1"></div>
+                </div>
+                <div class="item">
+                    <h5 v-html="title2"></h5>
+                    <div v-html="article2"></div>
+                </div>
+                <van-button size="large" @click="onClose">返回</van-button>
+            </div>
+        </van-popup>
     </div>
 </template>
 
@@ -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;
         }
     }
 };