|
|
|
@@ -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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
