feature

- 增加 一个心理详情汇总页面

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-05-30 11:08:46
+ * @LastEditTime: 2023-06-01 14:50:57
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -455,4 +455,9 @@ update
 - 心理监测详情页面
     - 增加 动态填充uid
 - 问卷调查页面
-    - 修复 toast无限加载的问题
+    - 修复 toast无限加载的问题
+
+## v1.0.56
+`2023.6.1`
+feature
+- 增加 一个心理详情汇总页面

src/config/models.js

@@ -5,7 +5,7 @@
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.55F'; //版本号
+export const VERSION_MODEL = '1.0.56F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/router/index.js

@@ -1,3 +1,10 @@
+/*
+ * @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
@@ -38,6 +45,8 @@ const routes = [
 
     // 健康-心理监测详情，抑郁，压力和疲劳
     { path: '/psychological', name: 'psychological', component: resolve => require(['@/views/health/psychological'], resolve) },
+    // 健康-抑郁，压力和疲劳汇总入口
+    { path: '/psychologicalMain', name: 'psychologicalMain', component: resolve => require(['@/views/health/psychological-main'], resolve) },
 ];
 
 const router = new VueRouter({

src/views/health/psychological-main/index.scss

@@ -0,0 +1,92 @@
+.psychological-main-container {
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    background-color: #F4F8FB;
+    .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;
+                    }
+                }
+            }
+        }
+    }
+}

src/views/health/psychological-main/index.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="psychological-main-container">
+        <van-nav-bar title="今日情绪" :border="true" :left-arrow="true" @click-left="onNavBack"></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: '',
+
+   }
+  },
+  created() {
+    this.loadParams();
+    this.getHomeData();
+  },
+  mounted() {
+
+  },
+  methods: {
+    loadParams() {
+        let params = this.$route.query;
+        if (params) {
+            this.uid = params.uid;
+        }
+    },
+    getHomeData() {
+        this.$toast.loading('数据加载中');
+        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 }
+        }).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() {
+        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>