update

- 心理监测详情
    - 修改 心情等级颜色
    - 修改 日历日期边框根据心情等级显示不同的颜色

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-07-05 09:57:41
+ * @LastEditTime: 2023-07-06 16:33:08
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -619,4 +619,12 @@ update
 `2023.7.6`
 update
 - 心理监测详情
-    - 修改 30天查询条件，从当月月初至月尾改成当天-30天
+    - 修改 30天查询条件，从当月月初至月尾改成当天-30天
+
+
+## v1.0.77
+`2023.7.6`
+update
+- 心理监测详情
+    - 修改 心情等级颜色
+    - 修改 日历日期边框根据心情等级显示不同的颜色

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-07-06 09:12:53
+ * @LastEditTime: 2023-07-06 16:27:29
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.76F'; //版本号
+export const VERSION_MODEL = '1.0.77F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/views/health/psychological/index.vue

@@ -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>
@@ -245,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"
                 } */
             ],
             // 情绪状态列表
@@ -269,8 +269,8 @@ export default {
             // 周报-情绪计算
             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" } */
             ],
             // 弹窗-日历是否显示
@@ -313,12 +313,7 @@ export default {
             // 结果解读
             result: "",
             // 需要高亮的日期数组
-            highlightDates: [
-                "2023-05-21",
-                "2023-05-25",
-                "2023-05-28",
-                "2023-05-24"
-            ],
+            highlightDates: [],
             // 选中的日历日期
             selectDate: '',
             uid: '',
@@ -327,7 +322,11 @@ export default {
             routeDate: '',
             params: {},
             isPopup: false,
-            resultLevel: ''
+            resultLevel: '',
+            mildColor: '#ffde00',
+            severeColor: '#ff8a00',
+            moderateColor: '#d70d0d',
+
         };
     },
     computed: {
@@ -365,7 +364,7 @@ export default {
                             name: `轻度${this.emoName}倾向`,
                             icon: "rect",
                             itemStyle: {
-                                color: "#FFB481"
+                                color: "#ffde00"
                             },
                             textStyle: {
                                 fontSize: 12
@@ -374,7 +373,7 @@ export default {
                         {
                             name: `中度${this.emoName}倾向`,
                             itemStyle: {
-                                color: "#F86825"
+                                color: "#ff8a00"
                             },
                             icon: "rect",
                             textStyle: {
@@ -384,7 +383,7 @@ export default {
                         {
                             name: `重度${this.emoName}倾向`,
                             itemStyle: {
-                                color: "#EB1D15",
+                                color: "#d70d0d",
                             },
                             icon: "rect",
                             textStyle: {
@@ -719,8 +718,25 @@ export default {
                  console.log("res", res);
                     if (res.data) {
                         let data = res.data.response;
+                        console.log("data", data);
                         // 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];
                     }
             })
 
@@ -781,7 +797,7 @@ export default {
                                 data.Count
                             ),
                             text: `轻度${this.emoName}倾向`,
-                            color: "#FEC350"
+                            color: "#ffde00"
                         };
                         let Moderate = {
                             count: data.Moderate,
@@ -790,7 +806,7 @@ export default {
                                 data.Count
                             ),
                             text: `中度${this.emoName}倾向`,
-                            color: "#F86825"
+                            color: "#ff8a00"
                         };
                         let Severe = {
                             count: data.Severe,
@@ -799,7 +815,7 @@ export default {
                                 data.Count
                             ),
                             text: `重度${this.emoName}倾向`,
-                            color: "#EB1D15"
+                            color: "#d70d0d"
                         };
                         // 饼状图右边数据
                         this.pieRightList.push(None);
@@ -859,17 +875,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: "#EB1D15"
+                            color: "#d70d0d"
                         };
                         this.emotionList.push(NoneDay);
                         this.emotionList.push(MildDay);
@@ -929,24 +945,6 @@ export default {
                     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}倾向`,
@@ -1041,13 +1039,15 @@ 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;
         },
@@ -1181,34 +1181,39 @@ 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) {
+        calcResultColor(value, isCallBackClass) {
             let color = "";
+            let className = "";
             switch(value) {
                 case '0':
                     color = "#62BD48";
+                    className = 'none';
                 break;
                 case '1':
-                    color = "#FEC350";
+                    color = "#ffde00";
+                    className = 'mild';
                 break;
                 case '2':
-                    color = "#F86825";
+                    color = "#ff8a00";
+                    className = 'moderate';
                 break;
                 case '3':
-                    color = "#EB1D15";
+                    color = "#d70d0d";
+                    className = 'severe';
                 break;
             }
-            return color;
+            return isCallBackClass ? className : color;
         },
         // 点击帮助
         onHelp() {
@@ -1251,6 +1256,18 @@ export default {
                 width: 27px;
                 height: 27px;
                 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 {