From 58d978f431d95a3acc84beb3dcc9050c56149b52 Mon Sep 17 00:00:00 2001 From: JinxChen <2183691628@qq.com> Date: Thu, 6 Jul 2023 16:34:24 +0800 Subject: [PATCH] =?UTF-8?q?update=20-=20=E5=BF=83=E7=90=86=E7=9B=91?= =?UTF-8?q?=E6=B5=8B=E8=AF=A6=E6=83=85=20=20=20=20=20-=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20=E5=BF=83=E6=83=85=E7=AD=89=E7=BA=A7=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=20=20=20=20=20-=20=E4=BF=AE=E6=94=B9=20=E6=97=A5?= =?UTF-8?q?=E5=8E=86=E6=97=A5=E6=9C=9F=E8=BE=B9=E6=A1=86=E6=A0=B9=E6=8D=AE?= =?UTF-8?q?=E5=BF=83=E6=83=85=E7=AD=89=E7=BA=A7=E6=98=BE=E7=A4=BA=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E7=9A=84=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++- src/config/models.js | 4 +- src/views/health/psychological/index.vue | 127 +++++++++++++---------- 3 files changed, 84 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index b747c6e..192fe6c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -619,4 +619,12 @@ update `2023.7.6` update - 心理监测详情 - - 修改 30天查询条件，从当月月初至月尾改成当天-30天 \ No newline at end of file + - 修改 30天查询条件，从当月月初至月尾改成当天-30天 + + +## v1.0.77 +`2023.7.6` +update +- 心理监测详情 + - 修改 心情等级颜色 + - 修改 日历日期边框根据心情等级显示不同的颜色 \ No newline at end of file diff --git a/src/config/models.js b/src/config/models.js index c154cb5..1688708 100644 --- a/src/config/models.js +++ b/src/config/models.js @@ -1,11 +1,11 @@ /* * @Date: 2021-11-20 10:26:39 * @LastEditors: JinxChen - * @LastEditTime: 2023-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/', diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index 1640685..4087273 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -83,7 +83,7 @@
{{ item.count ? item.count + '次' : '0次'}} - +
@@ -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 {