merge develop

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-06-25 16:08:26
+ * @LastEditTime: 2023-07-18 09:50:20
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -535,3 +535,126 @@ update
     - 增加 7天 和 30天数据查看功能
     - 优化 页面样式内容
     - 增加 返回到随手精灵逻辑
+
+## v1.0.67
+`2023.6.26`
+update
+- 心理监测首页
+    - 增加 页面路由参数 date
+
+## v1.0.68
+`2023.6.26`
+update
+- 心理建模进度查询
+    - 修复 页面重绘时进度条异常的问题
+    - 优化 进度条数值显示
+
+## v1.0.69
+`2023.6.27`
+fix
+- 心理监测首页
+    - 修复 从详情页面返回重新进入详情页面参数传递错误的问题
+
+
+## v1.0.70
+`2023.6.28`
+update
+- 心理监测首页
+    - 优化 路由传参非空判断的问题
+    - 优化 日期传参，当路由存在date参数并且在详情选中有日期时，路由的日期参数变成选中的日期
+    - 修改 日历组件的高度样式
+
+
+## v1.0.71
+`2023.6.28`
+fix
+- 心理监测首页
+    - 修复 是否显示返回文字判断错误的问题
+
+
+## v1.0.72
+`2023.6.29`
+update
+- 心理建模进度查询
+    - 增加 不自动跳转参数，autoJump === 1，则不跳转
+    - 增加 进度条详情数值显示
+- 心理监测首页
+    - 增加 抑郁，压力和疲劳心情图标
+
+- 心理监测详情
+    - 修改 图表拐点圆大小
+
+
+## v1.0.73
+`2023.6.30`
+update
+- 心理建模进度查询
+    - 修改 去完成按钮位置
+    - 增加 建模完成提示
+- 心理监测详情
+    - 修改 返回到汇总页面日期设置为今天
+    - 修改 重度颜色显示
+    - 修复 圆环图表的等级展示出现换行的问题
+    - 修复 选择历史监测数据后，界面还是显示：今天的问题
+    - 修复 轻度疲劳图标显示不正确的问题
+    - 取消 日历组件星期显示
+
+
+## v1.0.74
+`2023.7.4`
+update
+- 心理监测详情
+    - 优化 页面显示，把图表完整显示在页面上
+    - 增加 问号帮助提示文字说明
+
+
+## v1.0.75
+`2023.7.5`
+update
+- 心理监测详情
+    - 修改 页面文字
+    - 修改 页面方框文字大小
+
+## v1.0.76
+`2023.7.6`
+update
+- 心理监测详情
+    - 修改 30天查询条件，从当月月初至月尾改成当天-30天
+
+
+## v1.0.77
+`2023.7.6`
+update
+- 心理监测详情
+    - 修改 心情等级颜色
+    - 修改 日历日期边框根据心情等级显示不同的颜色
+
+## v1.0.78
+`2023.7.8`
+update
+- 心理监测详情
+    - 修改 7天和30天图表数据展示方式
+
+
+## v1.0.79
+`2023.7.10`
+update
+- 心理建模进度查询
+    - 增加 首次与 非首次建模提示文字
+- 心理监测详情
+    - 修改 饼状图右边百分比提示
+    - 修改 温馨提示文字
+
+
+## v1.0.80
+`2023.7.10`
+update
+- 心理监测详情
+    - 修改 饼状图右边百分比取整方式，四舍五入
+
+
+## v1.0.81
+`2023.7.12`
+update
+- 心理监测详情
+    - 修改 心情等级日历数据接口参数，增加 startDate 和 endDate，删除month参数

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-12 16:52:30
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.66F'; //版本号
+export const VERSION_MODEL = '1.0.81F'; //版本号
 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-main/index.vue

@@ -42,6 +42,7 @@
 
 <script>
 import axios from "axios";
+import { isNotNull} from "@/utils/index";
 export default {
   name: 'psychologicalMain',
   data(){
@@ -52,12 +53,14 @@ export default {
            { value: 75, name: '疲劳', class: 'tiredness', result: '中度疲劳', time: '17:52', img: require('@/assets/img/moderate.png') }, */
        ],
        uid: '',
+       routeDate: '',
+       params: {}
 
    }
   },
   computed: {
     isShowLeft() {
-        return this.$route.query.fromUrl !== undefined;
+        return isNotNull(this.$route.query.fromUrl);
     }
   },
   created() {
@@ -72,6 +75,8 @@ export default {
         let params = this.$route.query;
         if (params) {
             this.uid = params.uid;
+            this.routeDate = params.date;
+            this.params = params;
         }
     },
     getHomeData() {
@@ -80,7 +85,7 @@ export default {
         let reqUrl = `https://dbmq.rzliot.com/heart/api/Data/GetHomeData`;
         let reqParams = {
             uid: this.uid,
-            date: this.$dayjs(new Date()).format('YYYY-MM-DD')
+            date: this.routeDate || this.$dayjs(new Date()).format('YYYY-MM-DD')
         };
         axios.get(reqUrl, {
             params: { ...reqParams },
@@ -90,38 +95,45 @@ export default {
             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.DepScore,  name: '抑郁倾向', class: 'depression', result: data.DepDesc, time: data.DepMeasureTime ? this.$dayjs(data.DepMeasureTime).format('HH:mm'): '', level: data.DepLevel, img: data.DepScore ? this.calcImg(data.DepLevel, 'depression') : ''},
                 // 压力
-                { 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.StressScore,  name: '压力', class: 'stress', result: data.StressDesc, time: data.StressMeasureTime ? this.$dayjs(data.StressMeasureTime).format('HH:mm') : '', level: data.StressLevel, img: data.StressScore ? this.calcImg(data.StressLevel, 'stress') : ''},
                 // 疲劳
-                { 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) },
+                { value: data.TirScore,  name: '疲劳', class: 'tiredness', result: data.TirDesc, time: data.TirMeasureTime ? this.$dayjs(data.TirMeasureTime).format('HH:mm') : '', level: data.TirLevel, img: data.TirScore ? this.calcImg(data.TirLevel, 'tiredness') : '' },
             ];
             this.$toast.success('数据加载完成');
         }).catch(() =>{}).finally(() => { this.$toast.clear() })
 
     },
     onClick(item) {
-        this.$router.push({
+        this.params.name = item.class;
+        this.$router.replace({
             name: 'psychological',
             query: {
                 name: item.class,
-                uid: this.uid
+                uid: this.uid,
+                date: this.routeDate,
+                ...this.params
             }
         })
     },
     onNavBack() {
-        if(this.isShowLeft && this.$route.query.fromUrl !== undefined) {
+        if(this.isShowLeft) {
             window.location.href = `${this.$route.query.fromUrl}/#/device`;
         } else {
             this.$router.go(-1);
         }
     },
     // 计算表情
-    calcImg(level) {
+    calcImg(level, name) {
         let imgUrl = '';
-        switch(level) {
+        /* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */
+        let numLevel = Number(level);
+        console.log(`@/assets/img/psychological/${name}_${numLevel}.png`);
+        imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
+        /* switch(level) {
             case '0':
-                imgUrl = require('@/assets/img/regardless.png');
+                imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
             break;
             case '1':
                 imgUrl = require('@/assets/img/regardless.png');
@@ -132,7 +144,7 @@ export default {
             case '3':
                 imgUrl = require('@/assets/img/moderate.png');
             break;
-        }
+        } */
         return imgUrl;
     },
     // 计算颜色

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,15 +77,15 @@ $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: 40%;
+                    width: 35%;
                     @include center();
                     #pieChart {
                         height: 106px;
@@ -90,8 +93,8 @@ $newBlue: #638EE4;
                     }
                 }
                 .pie-chart-right {
-                    height: 180px;
-                    width: 55%;
+                    height: 150px;
+                    width: 65%;
                     padding-right: 20px;
                     @include center();
                     .list {
@@ -101,7 +104,7 @@ $newBlue: #638EE4;
                             display: flex;
                             justify-content: space-between;
                             align-items: center;
-                            font-size: 15px;
+                            font-size: 12px;
                             padding: 9px 0;
                             .item-left {
                                 display: flex;
@@ -114,10 +117,11 @@ $newBlue: #638EE4;
                                     margin: 0 4px;
                                 }
                                 span {
-                                    font-size: 15px;
+                                    font-size: 12px;
                                 }
                                 .text {
                                     color: #000;
+                                    font-size: 12px;
                                 }
                             }
                             .item-right {
@@ -131,7 +135,7 @@ $newBlue: #638EE4;
             }
             .statistics {
                 position: relative;
-                padding: 10px 14px;
+                padding: 0px 14px 5px 14px;
                 .list {
                     flex: 1;
                     width: 100%;
@@ -150,7 +154,7 @@ $newBlue: #638EE4;
                         .middle {
                             font-size: 24px;
                             font-weight: bold;
-                            padding: 16px 5px 11px 5px;
+                            padding: 5px;
                         }
                         .bottom {
                             font-size: 9px
@@ -167,11 +171,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 +183,7 @@ $newBlue: #638EE4;
                 height: 11px;
                 width: 100%;
                 background-color: $lineGray;
-                margin-top: 30px;
+                margin-top: 10px;
             }
             .result {
                 .result-con {
@@ -215,6 +219,7 @@ $newBlue: #638EE4;
                         .title-emo {
                             font-size: 24px;
                             padding: 14px 0 21px 0;
+                            text-align: left;
                         }
                         .no-data {
                             height: 250px;
@@ -309,4 +314,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>
@@ -83,7 +83,7 @@
 
                                 <div class="item-right">
                                     <span :style="{color: item.color}">{{ item.count ? item.count + '次' : '0次'}}</span>
-                                    <label :style="{color: item.color, paddingTop: '3px'}">{{ item.percentage ? '(' + item.percentage + '%'  + ')' : '(0%)'}}</label>
+                                    <label :style="{color: item.color}">{{ item.percentage ? '(' + item.percentage + '%'  + ')' : '(0%)'}}</label>
                                 </div>
                             </div>
                         </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>
 
@@ -229,19 +245,19 @@ export default {
                     text: "轻度情绪倾向",
                     count: 2,
                     percentage: "80",
-                    color: "#FEC350"
+                    color: "#ffde00"
                 },
                 {
                     text: "中度情绪倾向",
                     count: 1,
                     percentage: "80",
-                    color: "#F86825"
+                    color: "#ff8a00"
                 },
                 {
                     text: "重度情绪倾向",
                     count: 1,
                     percentage: "80",
-                    color: "#EB1D15"
+                    color: "#d70d0d"
                 } */
             ],
             // 情绪状态列表
@@ -250,13 +266,11 @@ export default {
                 { label: "最小值", value: "40", time: "10:15" },
                 { label: "最近值", value: "50", time: "18:15" } */
             ],
-            // 折线图标题
-            echartsTitle: "",
             // 周报-情绪计算
             emotionList: [
                /*  { days: "5", text: "无情绪倾向", color: "#62BD48" },
-                { days: "4", text: "轻度情绪倾向", color: "#FEC350" },
-                { days: "3", text: "中度情绪倾向", color: "#F86825" },
+                { days: "4", text: "轻度情绪倾向", color: "#ffde00" },
+                { days: "3", text: "中度情绪倾向", color: "#ff8a00" },
                 { days: "2", text: "重度情绪倾向", color: "#ACACAC" } */
             ],
             // 弹窗-日历是否显示
@@ -290,30 +304,39 @@ export default {
             ),
             // 路由传过来的情绪参数
             emoName: null,
-            // 左边标题
-            titleLeft: null,
             // 默认折线图 Series 配置
             defaultSeries: null,
             // 非日报折线图 Series 配置
             weekAndMonthSeries: null,
-            // 当前情绪颜色
-            currentColor: null || "#62BD48",
             // 当前情绪类型
             emoType: null,
             // 结果解读
             result: "",
             // 需要高亮的日期数组
-            highlightDates: [
-                "2023-05-21",
-                "2023-05-25",
-                "2023-05-28",
-                "2023-05-24"
-            ],
+            highlightDates: [],
             // 选中的日历日期
             selectDate: '',
             uid: '',
+            // 建议
             advice: '',
-            surveyTitle: '' || '本周概览'
+            // 底部天数标题
+            surveyTitle: '' || '7天概览',
+            // 路由中的日期
+            routeDate: '',
+            // 路由参数
+            params: {},
+            // 是否显示帮助
+            isPopup: false,
+            // 结果等级
+            resultLevel: '',
+            // 轻度级别颜色
+            mildColor: '#ffde00',
+            // 中度级别颜色
+            severeColor: '#ff8a00',
+            // 重度级别颜色
+            moderateColor: '#d70d0d',
+            // 7天和30天最大数据列表
+            weekAndMonData: [],
         };
     },
     computed: {
@@ -325,25 +348,25 @@ export default {
                 },
                 title: {
                     text: this.echartsTitle,
-                    left: "1%",
-                    right: 20,
+                    left: 1,
+                    right: 25,
                     bottom: 20,
                     top: "3%",
                     textStyle: {
-                        fontSize: 18,
+                        fontSize: 16,
                         fontWeight: "bold"
                     }
                 },
                 legend: {
-                    width: "60%",
+                    width: "65%",
                     orient: "horizontal",
-                    left: 'right',
-                    top: "3%",
-                    bottom: "3%",
+                    right: 'right',
+                    top: 1,
+                    bottom: "1%",
                     itemHeight: 12,
                     itemWidth: 12,
-                    itemGap: 14,
-                    align: 'auto',
+                    itemGap: 10,
+                    align: 'left',
                     selectedMode: false,
                     data: [
 
@@ -351,7 +374,7 @@ export default {
                             name: `轻度${this.emoName}倾向`,
                             icon: "rect",
                             itemStyle: {
-                                color: "#FFB481"
+                                color: "#ffde00"
                             },
                             textStyle: {
                                 fontSize: 12
@@ -360,7 +383,7 @@ export default {
                         {
                             name: `中度${this.emoName}倾向`,
                             itemStyle: {
-                                color: "#F86825"
+                                color: "#ff8a00"
                             },
                             icon: "rect",
                             textStyle: {
@@ -370,7 +393,7 @@ export default {
                         {
                             name: `重度${this.emoName}倾向`,
                             itemStyle: {
-                                color: "#F86825",
+                                color: "#d70d0d",
                             },
                             icon: "rect",
                             textStyle: {
@@ -404,9 +427,9 @@ export default {
                     show: true,
                     borderWidth: 1,
                     top: '20%',
-                    left: '3%',
+                    left: '1%',
                     right: '5%',
-                    bottom: '15%',
+                    bottom: '10%',
                     containLabel: true
                 },
                 xAxis: {
@@ -415,7 +438,7 @@ export default {
                         show: false
                     },
                     textStyle: {
-                        fontSize: 13
+                        fontSize: 10
                     },
                     axisTick: {
                         show: false
@@ -427,25 +450,21 @@ export default {
                             width: 2
                         }
                     },
-                    showMinLabel: true, //显示最小值
-                    showMaxLabel: true, //显示最大值
                     nameLocation: 'center',
-                    boundaryGap: ['20%', '20%'],
                     axisLabel: {
                         show: true,
                         fontSize: 12,
-                        /* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距
-                        margin: 10,
-                       /*  verticalAlign: "bottom" */
+                        showMinLabel: true, //显示最小值
+                        showMaxLabel: true, //显示最大值
                     },
                     data: this.xAxisData
                 },
                 dataZoom: [
-                    {
+                   /*  {
                         type: "inside",
                         start: 0,
                         end: 100,
-                    },
+                    }, */
                     {
                         start: 0,
                         end: 100,
@@ -454,8 +473,8 @@ export default {
                             fontSize: 14
                         },
                         show: true,
-                       /*  height: 18, */
-                        bottom: 20,
+                        height: 15,
+                        bottom: 5,
                         handleStyle: {
                             borderWidth: 1,
                             borderCap: "square"
@@ -468,13 +487,17 @@ export default {
                         fontSize: 14,
                         align: "center"
                     },
-                    formatter: "{b0}" + "</br>" + "{c0}"
+                    formatter: function(params) {
+                        return params[0].marker  + params[0].name + '--' + params[0].value + '</br>'
+                    }
                 },
                 yAxis: {
                     type: "value",
                     max: 100,
                     min: 0,
                     interval: 20,
+                    splitNumber : 1,
+			        boundaryGap : [ '5%', '5%' ],
                     nameTextStyle: {
                         fontSize: 13
                     },
@@ -485,7 +508,6 @@ export default {
                     axisLabel: {
                         show: true,
                         fontSize: 13,
-                        margin: 10
                     },
                     splitLine: {
                         show: true,
@@ -499,36 +521,15 @@ export default {
                     {
                         name: `无${this.emoName}倾向`,
                         type: "line",
-                        padding: 10,
+                        padding: 5,
                         data: this.emotionData,
                         symbol: "circle",
-                        symbolSize: 15, // 拐点圆的大小
-                        areaStyle: {},
-                        itemStyle: {
-                            color: function(params) {
-                                // 动态设置折线图远点颜色
-                                let value = params.data;
-                                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";
-                                }
-                                return color;
-                            }
-                        }
+                        symbolSize: 8,
                     },
                     {
                         name: `轻度${this.emoName}倾向`,
                         type: "line",
-                        padding: 10,
-                        data: "",
-                        symbol: "circle",
-                        symbolSize: 15, // 拐点圆的大小
+                        data: ""
                     },
                     {
                         name: `中度${this.emoName}倾向`,
@@ -543,7 +544,6 @@ export default {
                 ]
             };
         },
-
         imei() {
             return this.$store.getters.serialNo;
         },
@@ -593,7 +593,46 @@ export default {
                     }
                 ]
             };
-        }
+        },
+        titleLeft() {
+            let text = this.emoName === 'depression' ? '趋势' : '';
+            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}倾向${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: {
         // 监听数据发生变化 初始化各项图表
@@ -614,7 +653,7 @@ export default {
                 this.initPieEchart();
             },
             deep: true
-        }
+        },
     },
     created() {
         // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
@@ -635,25 +674,55 @@ export default {
                 this.emoName = EmotionModel[params.name].name;
                 this.emoType = EmotionModel[params.name].type;
                 this.uid = params.uid;
-                console.log("当前情绪是", EmotionModel[params.name].name);
+                this.routeDate = params.date;
+                this.params = params;
+                if(params.date) {
+                    this.dateList[0].text =  this.$dayjs(params.date).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : this.$dayjs(params.date).format("MM-DD");
+                    this.defaultDate = new Date(
+                        this.$dayjs(params.date)
+                            .hour(0)
+                            .minute(0)
+                            .second(0)
+                            .format()
+                    );
+                }
             }
         },
         // 获取这个月中有数据的日期，控制日历组件的日期样式
         getCalendarData() {
+            let currentDate = new Date();
+            // 获取最近30天的心情等级日历数据
+            let dateList = this.getPostDate(currentDate, 30, true);
             let reqUrl = `https://dbmq.rzliot.com/heart/api/Data/GetCalendarData`;
             let reqParams = {
                 uid: this.uid,
-                month: this.$dayjs(new Date()).format('YYYY-MM')
+                startDate: dateList[0],
+                endDate: dateList[1],
             };
             axios.get(reqUrl, {
                 params: { ...reqParams },
                 headers: { 'AuthToken': this.$store.getters.ssjlToken }
             }).then(res => {
-                 console.log("res", res);
                     if (res.data) {
                         let data = res.data.response;
                         // const mergedArr = [...new Set([...arr1, ...arr2, ...arr3])];
-                        this.highlightDates = [ ...new Set([...data.Depression, ...data.Stress, ...data.Tiredness]) ]
+                        /* let name = this.params.name.charAt(0).toUpperCase()+ this.params.name.slice(1); */
+                        let currentName = this.params.name;
+                        let list = [];
+                        if(currentName === 'stress') {
+                            list = data.Stress;
+                        } else if(currentName === 'depression') {
+                            list = data.Depression;
+                        } else {
+                            list = data.Tiredness;
+                        }
+                        list = list.map(item =>{
+                            item.Date = this.$dayjs(item.Date.replace(/-/g, "/")).format(
+                                "YYYY/MM/DD"
+                            );
+                            return item;
+                        })
+                        this.highlightDates = [...list];
                     }
             })
 
@@ -676,7 +745,7 @@ export default {
             let reqDate =
                 date
                 ? this.$dayjs(date).format("YYYY-MM-DD")
-                : this.$dayjs(this.defaultDate).format("YYYY-MM-DD") /* "2023-05-23" */;
+                : this.routeDate || this.$dayjs(this.defaultDate).format("YYYY-MM-DD") /* "2023-05-23" */;
             let reqParams = {
                 uid: this.uid,
                 startDate: startDate || reqDate,
@@ -691,7 +760,6 @@ export default {
                     headers: { 'AuthToken': this.$store.getters.ssjlToken }
                 })
                 .then(res => {
-                    console.log("res", res);
                     if (res.data) {
                         let data = res.data.response;
                         // 监测次数
@@ -715,7 +783,7 @@ export default {
                                 data.Count
                             ),
                             text: `轻度${this.emoName}倾向`,
-                            color: "#FEC350"
+                            color: "#ffde00"
                         };
                         let Moderate = {
                             count: data.Moderate,
@@ -724,7 +792,7 @@ export default {
                                 data.Count
                             ),
                             text: `中度${this.emoName}倾向`,
-                            color: "#F86825"
+                            color: "#ff8a00"
                         };
                         let Severe = {
                             count: data.Severe,
@@ -733,7 +801,7 @@ export default {
                                 data.Count
                             ),
                             text: `重度${this.emoName}倾向`,
-                            color: "#EB1D15"
+                            color: "#d70d0d"
                         };
                         // 饼状图右边数据
                         this.pieRightList.push(None);
@@ -793,17 +861,17 @@ export default {
                         let MildDay = {
                             days: data.MildDay,
                             text: `轻度${this.emoName}倾向`,
-                            color: "#FEC350"
+                            color: "#ffde00"
                         };
                         let ModerateDay = {
                             days: data.ModerateDay,
                             text: `中度${this.emoName}倾向`,
-                            color: "#F86825"
+                            color: "#ff8a00"
                         };
                         let SevereDay = {
                             days: data.SevereDay,
                             text: `重度${this.emoName}倾向`,
-                            color: "#ACACAC"
+                            color: "#d70d0d"
                         };
                         this.emotionList.push(NoneDay);
                         this.emotionList.push(MildDay);
@@ -811,7 +879,18 @@ export default {
                         this.emotionList.push(SevereDay);
                         // 图表数据
                         this.emotionData = data.ChartDatas.map(item => {
-                            return item.Value;
+                            return {
+                                value: item.Value,
+                                itemStyle: {
+                                    color: this.calcResultColor(item.Level)
+                                }
+                            };
+                        });
+                        // 7天 和 30天柱形图显示
+                        this.weekAndMonData = data.ChartDatas.map((item, index) => {
+                            return {
+                                value: [index, item.MinValue, item.MaxValue],
+                            };
                         });
                         // x轴显示数据
                         if(this.currentDays === 0) {
@@ -827,9 +906,78 @@ export default {
                                     "MM/DD"
                                 );
                             });
+                            let emphasisStyle = {
+                                itemStyle: {
+                                    shadowBlur: 10,
+                                    shadowColor: 'rgba(0,0,0,0.3)'
+                                }
+                            };
+                            let that = this;
+                            // 7天和30天变成柱状图
+                            this.weekAndMonthSeries = [
+                                {
+                                    name: '平均值',
+                                    type: 'scatter',
+                                    symbolSize: 8,
+                                    data: this.emotionData,
+                                },
+                                {
+                                    name: '',
+                                    type: 'custom',
+                                    data: this.weekAndMonData,
+                                    renderItem: function (params, api) {
+                                        var categoryIndex = api.value(0);
+                                        var end = api.coord([categoryIndex, api.value(1)]);
+                                        var start = api.coord([categoryIndex, api.value(2)]);
+                                        var width = 8;
+                                        var rectShape = that.$echarts.graphic.clipRectByRect(
+                                            {
+                                            x: start[0] - width / 2,
+                                            y: start[1],
+                                            width: 8,
+                                            height: end[1] - start[1],
+                                            },
+                                            {
+                                            x: params.coordSys.x,
+                                            y: params.coordSys.y,
+                                            width: params.coordSys.width,
+                                            height: params.coordSys.height,
+                                            }
+                                        );
+                                        if(rectShape) {
+                                            rectShape.r = [10]
+                                        };
+                                        return (
+                                            rectShape && {
+                                            type: "rect",
+                                            shape: rectShape,
+                                            style: api.style(),
+                                            }
+                                        );
+                                    },
+                                    itemStyle: {
+                                        opacity: 0.8,
+                                    },
+                                    encode: {
+                                        y: [1, 2],
+                                        x: 0,
+                                    },
+                                },
+                            ];
+                            // 点击提示此时为空
+                            this.defaultOptions.tooltip = {
+                                trigger: "axis",
+                                formatter: function(params) {
+                                    return params[0].marker + '平均值:' + params[0].name + '--' + params[0].value + '</br>' +
+                                    params[1].marker + '最大值:' + params[1].name +  '--' + params[1].value[2] + '</br>' +
+                                    params[1].marker + '最小值:' + params[1].name +  '--' + params[1].value[1];
+                                }
+                            };
+                            this.defaultOptions.series = this.weekAndMonthSeries;
                         }
                         // 结果解读
                         this.result = data.Result;
+                        this.resultLevel = data.ResultLevel;
                         this.advice = data.Advice;
                         this.$toast.loading({
                             message: '数据加载完成'
@@ -846,113 +994,44 @@ export default {
             ) {
                 return 0;
             }
-            return Math.floor((value / total) * 1000) / 10;
+            let milValue = value * 1000;
+            let milTotal = total * 1000;
+            return Math.round((milValue / milTotal) * 100);
         },
         // 初始化图表的文字内容
         initEchartText() {
+            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 = `${this.emoName}数据图`;
-            this.titleLeft = `今天${this.emoName}倾向趋势`;
             this.defaultSeries = [
                 {
-                    name: `无${this.emoName}倾向`,
-                    type: "line",
-                    padding: 10,
-                    data: this.emotionData,
-                    symbol: "circle",
-                    symbolSize: 15, // 拐点圆的大小
-                    areaStyle: {},
-                    itemStyle: {
-                        color: function(params) {
-                            // 动态设置折线图远点颜色
-                            this.calcColor(params.data);
-                           /* let value = params.data;
-                                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";
-                                }
-                                return color; */
-                        }
-                    }
-                },
-                {
-                    name: `轻度${this.emoName}倾向`,
-                    type: "line",
-                    padding: 10,
-                    data: "",
-                    symbol: "circle",
-                    symbolSize: 15, // 拐点圆的大小
-                    itemStyle: {
-                        color: function(params) {
-                            // 动态设置折线图远点颜色
-                        }
-                    }
-                },
-                {
-                    name: `中度${this.emoName}倾向`,
-                    type: "line",
-                    data: ""
-                },
-                {
-                    name: `重度${this.emoName}倾向`,
-                    type: "line",
-                    data: ""
-                }
-            ];
-            this.weekAndMonthSeries = [
-                {
-                    name: `无${this.emoName}倾向`,
-                    type: "scatter",
-                    data: '',
-                    symbolSize: 15,
-                    symbol: "circle",
-                    itemStyle: {
-                        borderColor: "#6CE463",
-                        color: function(params) {
-                            // 动态设置折线图远点颜色
-                            this.calcColor(params.data);
-                        }
-                    }
-                },
-                {
-                    name: `轻度${this.emoName}倾向`,
-                    type: "scatter",
-                    /* data: [60, 60, 50, 60, 59, 60, 60], */
-                    symbol: "path://M9 0h0a9 9 0 0 2 9 9v55a9 9 0 0 2-9 9h0a9 9 0 0 2-9-9v-55a9 9 0 0 2 10-9z",
-                    symbolSize: [60, 60],
-                    symbolKeepAspect: true,
-                    itemStyle: {
-                        borderColor: "#6CE463", // 圆点边框颜色
-                        borderWidth: 0, // 圆点边框宽度
-                        opacity: 0.5,
-                        color: function(params) {
-                            // 动态设置折线图远点颜色
-                        }
+                        name: ``,
+                        type: "line",
+                        padding: 5,
+                        data: this.emotionData,
+                        symbol: "circle",
+                        symbolSize: 8, // 拐点圆的大小
+                        areaStyle: {},
+                    },
+                    {
+                        name: `轻度${this.emoName}倾向`,
+                        type: "line",
+                        padding: 10,
+                        data: "",
+                        symbol: "circle",
+                        symbolSize: 8, // 拐点圆的大小
+                    },
+                    {
+                        name: `中度${this.emoName}倾向`,
+                        type: "line",
+                        data: ""
+                    },
+                    {
+                        name: `重度${this.emoName}倾向`,
+                        type: "line",
+                        data: ""
                     }
-                },
-                {
-                    name: `中度${this.emoName}倾向`,
-                    data: "",
-                    type: "line"
-                },
-                {
-                    name: `重度${this.emoName}倾向`,
-                    data: "",
-                    type: "line"
-                }
             ];
-            /* this.defaultOptions.series = this.defaultOptions.series.map(
-                item => {
-                    item.name = item.name.replace("情绪", this.emoName);
-                    return item;
-                }
-            ); */
             this.pieRightList = this.pieRightList.map(item => {
                 item.text = item.text.replace("情绪", this.emoName);
                 return item;
@@ -974,19 +1053,27 @@ export default {
         formatter(day) {
             const month = day.date.getMonth() + 1;
             const date = day.date.getDate();
-            const formatDate = this.$dayjs(day.date).format("YYYY-MM-DD");
-            const currentDate = this.$dayjs(new Date()).format("YYYY-MM-DD");
+            const formatDate = this.$dayjs(day.date).format("YYYY/MM/DD");
+            const currentDate = this.$dayjs(new Date()).format("YYYY/MM/DD");
             day.className = "custom-calendar";
-            if (this.highlightDates.includes(formatDate)) {
-                day.className = "highlight-border";
-            }else if (formatDate === currentDate) {
-                day.text = '今天'
+            for( let h = 0; h < this.highlightDates.length; h ++) {
+                if (this.highlightDates[h].Date === formatDate) {
+                    day.className = `highlight-border ${this.calcResultColor(this.highlightDates[h].SummaryLevel, true)}`;
+                } else if (formatDate === currentDate) {
+                    day.text = '今天'
+                }
             }
             return day;
         },
         //   返回
         onNavBack() {
-            this.$router.go(-1);
+            this.params.name = '';
+            this.$router.replace({
+                name: 'psychologicalMain',
+                query: {
+                    ...this.params
+                }
+            });
         },
         // 点击日期选择
         onTabClick(value, index) {
@@ -994,10 +1081,9 @@ export default {
             this.currentDays = value;
             let currentDate = new Date();
             let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天';
-            this.titleLeft = `${leftText}${this.emoName}倾向趋势`;
-            this.surveyTitle = value === 7 ? '本周概览' : '本月概览';
+            this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
             if (value === 7) {
-                this.defaultOptions.xAxis.data = [
+               /*  this.defaultOptions.xAxis.data = [
                     "周一",
                     "周二",
                     "周三",
@@ -1005,8 +1091,8 @@ export default {
                     "周五",
                     "周六",
                     "周日"
-                ];
-                this.defaultOptions.series = this.weekAndMonthSeries;
+                ]; */
+                //this.defaultOptions.xAxis.data = this.xAxisData;
                 let dateList = this.getPostDate(currentDate, 6, true);
                 console.log("dateList", dateList);
                 this.getPsychologiclData('', dateList[0], dateList[1]);
@@ -1021,7 +1107,7 @@ export default {
                 this.defaultOptions.xAxis.data = this.xAxisData;
                 this.defaultOptions.series = this.defaultSeries;
                 this.defaultOptions.series[0].data = this.emotionData;
-                let dateList = this.getCurrentMonthStaAndEnd(currentDate);
+                let dateList = this.getPostDate(currentDate, 30, true);
                 console.log("dateList", dateList);
                 this.getPsychologiclData('', dateList[0], dateList[1]);
             }
@@ -1109,15 +1195,47 @@ export default {
             if (value <= 40) {
                 color = "#62BD48";
             } else if (value > 40 && value <= 65) {
-                color = "#FEC350";
+                color = "#ffde00";
             } else if (value > 65 && value <= 80) {
-                color = "#F86825";
+                color = "#ff8a00";
             } else if (value > 80) {
-                color = "#EB1D15";
+                color = "#d70d0d";
             } else {
                 color = "";
             }
             return color;
+        },
+        // 计算结果采用哪种颜色
+        calcResultColor(value, isCallBackClass) {
+            let color = "";
+            let className = "";
+            switch(value) {
+                case '0':
+                    color = "#62BD48";
+                    className = 'none';
+                break;
+                case '1':
+                    color = "#ffde00";
+                    className = 'mild';
+                break;
+                case '2':
+                    color = "#ff8a00";
+                    className = 'moderate';
+                break;
+                case '3':
+                    color = "#d70d0d";
+                    className = 'severe';
+                break;
+            }
+            return isCallBackClass ? className : color;
+        },
+        // 点击帮助
+        onHelp() {
+            this.isPopup = true;
+        },
+        // 关闭poup
+        onClose() {
+            this.isPopup = false;
         }
     }
 };
@@ -1132,31 +1250,45 @@ export default {
     overflow: scroll;
 }
 .calendar {
-   /*  height: 300px; */
     overflow: scroll;
     .van-calendar {
-        height: 300px;
+        height: 350px;
+        .van-calendar__header {
+            display: none;
+        }
         .van-calendar__days .van-calendar__day {
             width: 27px;
             height: 27px;
+            margin: 5px;
             font-size: 12px;
             &.custom-calendar {
                 width: 27px;
                 height: 27px;
-                margin: 5px;
             }
             &.highlight-border {
                 border: 1px solid #62bd48;
                 width: 27px;
                 height: 27px;
-                margin: 5px;
                 border-radius: 50%;
+                &.none {
+                    border: 1px solid #62bd48;
+                }
+                &.mild {
+                    border: 1px solid #ffde00;
+                }
+                &.moderate {
+                    border: 1px solid #ff8a00;
+                }
+                &.severe {
+                    border: 1px solid #d70d0d;
+                }
             }
         }
         .van-calendar__selected-day {
             width: 27px;
             height: 27px;
             border-radius: 50%;
+            font-size: 12px;
         }
     }
 }

src/views/psychological-modeling/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="page" v-show="isSHowPage">
+	<div class="page" v-if="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"/>返回
@@ -12,7 +12,7 @@
 			<div class="info">
 				<div class="titie">温馨提醒：</div>
 				<div class="content">
-					首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。
+                    {{ tips }}
 				</div>
 			</div>
 		</div>
@@ -27,14 +27,14 @@
 						></span>
 						<span>已完成</span>
 					</div>
-					<div class="status" v-else>待完成</div>
+					<div class="status" v-else>{{ stateText}}</div>
 				</div>
 				<div class="schedule">
 					<van-progress
-						:percentage="info.progress"
+						:percentage="(info.progress) * 100"
 						stroke-width="10px"
 						color="#638ee4"
-						:show-pivot="false"
+						:show-pivot="true"
 					></van-progress>
 				</div>
 				<div class="sub_title">
@@ -56,18 +56,25 @@
 				<div class="sub_title">
 					完成一次“情绪初始化评估”，有助于建立您的个人情绪模型。
 				</div>
+                <div class="step_button">
+                    <van-button
+                        round
+                        type="info"
+                        style="width: 100%; height: 100%"
+                        v-if="info.initScaleState !== 1"
+                        @click="toQuestion"
+                    >去完成</van-button>
+                </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 class="completed" v-show="info.progress === 1 && info.initScaleState === 1">
+                <van-button
+                    round
+                    type="info"
+                    >建模已完成</van-button
+                >
+            </div>
 		</div>
+
 	</div>
 </template>
 
@@ -83,7 +90,20 @@ export default {
             isSHowPage: false,
             fromUrl: '',
 		}
-	},
+    },
+    computed: {
+        stateText() {
+            return this.info.progress > 0 ? '进行中' : '待完成';
+        },
+        autoJump() {
+            return this.$route.query.autoJump === '1';
+        },
+        tips() {
+            return this.info.isFirstModeling === 1
+            ? '首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。'
+            : '由于您长时间未佩戴手表，需重新建模，请连续佩戴不低于2小时，佩戴完成后，将为您计算抑郁、压力、疲劳的分值。'
+        }
+    },
 	mounted() {
 		//页面标题
 		window.document.title = '情绪初始化建模'
@@ -128,14 +148,13 @@ export default {
                 },
 			}, ssjlToken)
 			if (re.success) {
+                this.info = re.response
 				if (re.response && re.response.state === -1) {
 					this.$toast('用户不存在或未绑定手表')
-				} else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1) {
+				} else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1 && !this.autoJump) {
                     // 2023.6.1 需求变更，建模完成直接跳到心理健康汇总页面
-                    this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl}`);
-                } else {
-					this.info = re.response
-				}
+                    this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl || ''}`);
+                }
 			} else {
 				this.$toast(re.msg)
             }
@@ -223,7 +242,6 @@ export default {
 	text-align: left;
 	background: #f4f4f4;
 	padding-bottom: 30vw;
-
 	.tip {
 		display: flex;
 		font-size: 3.3vw;
@@ -256,7 +274,6 @@ export default {
 			}
 		}
 	}
-
 	.step {
 		margin-top: 3vw;
 		padding: 4vw 8vw;
@@ -300,9 +317,29 @@ export default {
 		.sub_title {
 			padding: 3vw 0;
 			color: gray;
-		}
+        }
+        .step_button {
+            height: 14vw;
+            width: 60vw;
+            margin: auto;
+            .van-button--info {
+                background-color: #638ee4;
+                border: 1px solid #638ee4;
+            }
+        }
 	}
-
+    .completed {
+        position: relative;
+        margin-top: 3vw;
+        height: 400px;
+            @include center();
+            .van-button--info {
+                height: 8vh;
+                width: 75vw;
+                background-color: #638ee4;
+                border: 1px solid #638ee4;
+            }
+        }
 	.button {
 		position: fixed;
 		left: 0;