1 changed files with 31 additions and 38 deletions
+ 31
- 38
src/views/health/psychological/index.vue
View File
| @@ -163,7 +163,7 @@ | |||||
| <div class="result-con" v-show="current > 0"> | <div class="result-con" v-show="current > 0"> | ||||
| <div class="title"> | <div class="title"> | ||||
| <span class="title-text">本周概览</span> | |||||
| <span class="title-text">{{ surveyTitle }}</span> | |||||
| <div class="mood-list" v-if="emotionList.length > 0"> | <div class="mood-list" v-if="emotionList.length > 0"> | ||||
| <div class="item" v-for="(item, index) in emotionList" :key="index"> | <div class="item" v-for="(item, index) in emotionList" :key="index"> | ||||
| <p> | <p> | ||||
| @@ -312,7 +312,8 @@ export default { | |||||
| // 选中的日历日期 | // 选中的日历日期 | ||||
| selectDate: '', | selectDate: '', | ||||
| uid: '', | uid: '', | ||||
| advice: '' | |||||
| advice: '', | |||||
| surveyTitle: '' || '本周概览' | |||||
| }; | }; | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -506,11 +507,18 @@ export default { | |||||
| itemStyle: { | itemStyle: { | ||||
| color: function(params) { | color: function(params) { | ||||
| // 动态设置折线图远点颜色 | // 动态设置折线图远点颜色 | ||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#62BD48"; | |||||
| 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; | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -521,16 +529,6 @@ export default { | |||||
| data: "", | data: "", | ||||
| symbol: "circle", | symbol: "circle", | ||||
| symbolSize: 15, // 拐点圆的大小 | symbolSize: 15, // 拐点圆的大小 | ||||
| itemStyle: { | |||||
| color: function(params) { | |||||
| // 动态设置折线图远点颜色 | |||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#62BD48"; | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | }, | ||||
| { | { | ||||
| name: `中度${this.emoName}倾向`, | name: `中度${this.emoName}倾向`, | ||||
| @@ -867,11 +865,19 @@ export default { | |||||
| itemStyle: { | itemStyle: { | ||||
| color: function(params) { | color: function(params) { | ||||
| // 动态设置折线图远点颜色 | // 动态设置折线图远点颜色 | ||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#62BD48"; | |||||
| } | |||||
| 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; */ | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -885,11 +891,6 @@ export default { | |||||
| itemStyle: { | itemStyle: { | ||||
| color: function(params) { | color: function(params) { | ||||
| // 动态设置折线图远点颜色 | // 动态设置折线图远点颜色 | ||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#62BD48"; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -908,25 +909,21 @@ export default { | |||||
| { | { | ||||
| name: `无${this.emoName}倾向`, | name: `无${this.emoName}倾向`, | ||||
| type: "scatter", | type: "scatter", | ||||
| data: /* this.emotionData */ [60, 60, 50, 60, 59, 60, 60], | |||||
| data: '', | |||||
| symbolSize: 15, | symbolSize: 15, | ||||
| symbol: "circle", | symbol: "circle", | ||||
| itemStyle: { | itemStyle: { | ||||
| borderColor: "#6CE463", | borderColor: "#6CE463", | ||||
| color: function(params) { | color: function(params) { | ||||
| // 动态设置折线图远点颜色 | // 动态设置折线图远点颜色 | ||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#6CE463"; | |||||
| } | |||||
| this.calcColor(params.data); | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| name: `轻度${this.emoName}倾向`, | name: `轻度${this.emoName}倾向`, | ||||
| type: "scatter", | type: "scatter", | ||||
| data: [60, 60, 50, 60, 59, 60, 60], | |||||
| /* 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", | 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], | symbolSize: [60, 60], | ||||
| symbolKeepAspect: true, | symbolKeepAspect: true, | ||||
| @@ -936,11 +933,6 @@ export default { | |||||
| opacity: 0.5, | opacity: 0.5, | ||||
| color: function(params) { | color: function(params) { | ||||
| // 动态设置折线图远点颜色 | // 动态设置折线图远点颜色 | ||||
| if (params.data > 140) { | |||||
| return "red"; | |||||
| } else { | |||||
| return "#6CE463"; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -1003,6 +995,7 @@ export default { | |||||
| let currentDate = new Date(); | let currentDate = new Date(); | ||||
| let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天'; | let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天'; | ||||
| this.titleLeft = `${leftText}${this.emoName}倾向趋势`; | this.titleLeft = `${leftText}${this.emoName}倾向趋势`; | ||||
| this.surveyTitle = value === 7 ? '本周概览' : '本月概览'; | |||||
| if (value === 7) { | if (value === 7) { | ||||
| this.defaultOptions.xAxis.data = [ | this.defaultOptions.xAxis.data = [ | ||||
| "周一", | "周一", | ||||
Loading…