|
|
|
@@ -1,6 +1,10 @@ |
|
|
|
<template> |
|
|
|
<div class="psychological-container"> |
|
|
|
<van-nav-bar :title="emoName + '监测'" :border="true" :left-arrow="true" @click-left="onNavBack"></van-nav-bar> |
|
|
|
<van-nav-bar :title="emoName + '监测'" :border="true" :left-arrow="true" @click-left="onNavBack"> |
|
|
|
<template #left> |
|
|
|
<van-icon name="arrow-left" size="24" style="padding: 0"/> |
|
|
|
</template> |
|
|
|
</van-nav-bar> |
|
|
|
<div class="main"> |
|
|
|
<div class="top"> |
|
|
|
<!-- 日期选择 --> |
|
|
|
@@ -22,7 +26,7 @@ |
|
|
|
<!-- 标题 --> |
|
|
|
<div class="title"> |
|
|
|
<div class="title-left">{{ titleLeft }}</div> |
|
|
|
<div class="title-right"> |
|
|
|
<div class="title-right" v-show="currentDays === 0"> |
|
|
|
<p @click="onHistory">历史监测</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -58,7 +62,7 @@ |
|
|
|
|
|
|
|
<!-- 监测次数 --> |
|
|
|
<div class="monitoring-count"> |
|
|
|
<p>监测次数：{{ monitoringCount || '--' }}次</p> |
|
|
|
<p>监测次数：{{ monitoringCount || '0' }}次</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 折线图-非日报 --> |
|
|
|
@@ -78,10 +82,8 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-right"> |
|
|
|
<span :style="{color: item.color}">{{ item.count ? item.count + '次' : '--'}}</span> |
|
|
|
<span |
|
|
|
:style="{color: item.color}" |
|
|
|
>{{ item.percentage ? item.percentage + '%' : '--'}}</span> |
|
|
|
<span :style="{color: item.color}">{{ item.count ? item.count + '次' : '0次'}}</span> |
|
|
|
<label :style="{color: item.color, paddingTop: '3px'}">{{ item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'}}</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -201,8 +203,8 @@ export default { |
|
|
|
// 日期选择标签 |
|
|
|
dateList: [ |
|
|
|
{ name: "today", text: "今天", value: 0 }, |
|
|
|
/* { name: "week", text: "7天", value: 7 }, |
|
|
|
{ name: "month", text: "30天", value: 30 } */ |
|
|
|
{ name: "week", text: "7天", value: 7 }, |
|
|
|
{ name: "month", text: "30天", value: 30 } |
|
|
|
], |
|
|
|
current: 0, // 日期选择标签-当前选中的标签 |
|
|
|
currentDays: 0, //日期选择标签-日期参数 |
|
|
|
@@ -334,39 +336,40 @@ export default { |
|
|
|
legend: { |
|
|
|
width: "60%", |
|
|
|
orient: "horizontal", |
|
|
|
right: "right", |
|
|
|
left: 'right', |
|
|
|
top: "3%", |
|
|
|
bottom: "3%", |
|
|
|
itemHeight: 12, |
|
|
|
itemWidth: 12, |
|
|
|
itemGap: 14, |
|
|
|
align: 'auto', |
|
|
|
selectedMode: false, |
|
|
|
data: [ |
|
|
|
|
|
|
|
{ |
|
|
|
name: `无${this.emoName}倾向`, |
|
|
|
name: `轻度${this.emoName}倾向`, |
|
|
|
icon: "rect", |
|
|
|
itemStyle: { |
|
|
|
color: "#62BD48" |
|
|
|
color: "#FFB481" |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
// 项目遗留问题，新项目不需重新转换文字大小 |
|
|
|
fontSize: 12 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `轻度${this.emoName}倾向`, |
|
|
|
icon: "rect", |
|
|
|
name: `中度${this.emoName}倾向`, |
|
|
|
itemStyle: { |
|
|
|
color: "#FFB481" |
|
|
|
color: "#F86825" |
|
|
|
}, |
|
|
|
icon: "rect", |
|
|
|
textStyle: { |
|
|
|
fontSize: 12 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `中度${this.emoName}倾向`, |
|
|
|
name: `重度${this.emoName}倾向`, |
|
|
|
itemStyle: { |
|
|
|
color: "#F86825" |
|
|
|
color: "#F86825", |
|
|
|
}, |
|
|
|
icon: "rect", |
|
|
|
textStyle: { |
|
|
|
@@ -374,15 +377,16 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `重度${this.emoName}倾向`, |
|
|
|
name: `无${this.emoName}倾向`, |
|
|
|
icon: "rect", |
|
|
|
itemStyle: { |
|
|
|
color: "#F86825" |
|
|
|
color: "#62BD48" |
|
|
|
}, |
|
|
|
icon: "rect", |
|
|
|
textStyle: { |
|
|
|
// 项目遗留问题，新项目不需重新转换文字大小 |
|
|
|
fontSize: 12 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
formatter: function(name) { |
|
|
|
// 自定义显示内容 |
|
|
|
@@ -666,7 +670,7 @@ export default { |
|
|
|
]; |
|
|
|
}, |
|
|
|
// 获取情绪数据 |
|
|
|
getPsychologiclData(date) { |
|
|
|
getPsychologiclData(date, startDate, endDate) { |
|
|
|
|
|
|
|
this.$toast.loading({ |
|
|
|
message: '数据加载中' |
|
|
|
@@ -677,8 +681,8 @@ export default { |
|
|
|
: this.$dayjs(this.defaultDate).format("YYYY-MM-DD") /* "2023-05-23" */; |
|
|
|
let reqParams = { |
|
|
|
uid: this.uid, |
|
|
|
startDate: reqDate, |
|
|
|
endDate: reqDate, |
|
|
|
startDate: startDate || reqDate, |
|
|
|
endDate: endDate || reqDate, |
|
|
|
type: this.emoType |
|
|
|
}; |
|
|
|
console.log("请求参数", reqParams); |
|
|
|
@@ -750,25 +754,37 @@ export default { |
|
|
|
label: "最大值", |
|
|
|
value: data.Max, |
|
|
|
time: data.MaxDesc |
|
|
|
? this.$dayjs(data.MaxDesc).format("hh:mm") |
|
|
|
? this.currentDays === 0 ? this.$dayjs(data.MaxDesc).format("HH:mm") |
|
|
|
: this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") |
|
|
|
: "" |
|
|
|
}; |
|
|
|
let Min = { |
|
|
|
label: "最小值", |
|
|
|
value: data.Min, |
|
|
|
time: data.MinDesc |
|
|
|
? this.$dayjs(data.MinDesc).format("hh:mm") |
|
|
|
? this.currentDays === 0 ? this.$dayjs(data.MinDesc).format("HH:mm") |
|
|
|
: this.$dayjs(data.MinDesc).format("MM/DD HH:mm") |
|
|
|
: "" |
|
|
|
}; |
|
|
|
let Avg = { |
|
|
|
label: "平均值", |
|
|
|
value: data.Avg, |
|
|
|
time: data.AvgDesc |
|
|
|
? this.currentDays === 0 ? this.$dayjs(data.AvgDesc).format("HH:mm") |
|
|
|
: this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") |
|
|
|
: "" |
|
|
|
}; |
|
|
|
let Current = { |
|
|
|
label: "最近值", |
|
|
|
value: data.Current, |
|
|
|
time: data.CurrentDesc |
|
|
|
? this.$dayjs(data.CurrentDesc).format("hh:mm") |
|
|
|
? this.currentDays === 0 ? this.$dayjs(data.CurrentDesc).format("HH:mm") |
|
|
|
: this.$dayjs(data.CurrentDesc).format("MM/DD HH:mm") |
|
|
|
: "" |
|
|
|
}; |
|
|
|
this.statisticsList.push(Max); |
|
|
|
this.statisticsList.push(Min); |
|
|
|
this.statisticsList.push(Avg); |
|
|
|
this.statisticsList.push(Current); |
|
|
|
// 周报月报底部显示数据 |
|
|
|
let NoneDay = { |
|
|
|
@@ -800,11 +816,20 @@ export default { |
|
|
|
return item.Value; |
|
|
|
}); |
|
|
|
// x轴显示数据 |
|
|
|
this.xAxisData = data.ChartDatas.map(item => { |
|
|
|
return this.$dayjs(item.Key.replace(/-/g, "/")).format( |
|
|
|
"HH:mm" |
|
|
|
); |
|
|
|
}); |
|
|
|
if(this.currentDays === 0) { |
|
|
|
// 显示今天数据 |
|
|
|
this.xAxisData = data.ChartDatas.map(item => { |
|
|
|
return this.$dayjs(item.Key.replace(/-/g, "/")).format( |
|
|
|
"HH:mm" |
|
|
|
); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.xAxisData = data.ChartDatas.map(item => { |
|
|
|
return this.$dayjs(item.Key.replace(/-/g, "/")).format( |
|
|
|
"MM/DD" |
|
|
|
); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 结果解读 |
|
|
|
this.result = data.Result; |
|
|
|
this.advice = data.Advice; |
|
|
|
@@ -958,9 +983,12 @@ export default { |
|
|
|
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"); |
|
|
|
day.className = "custom-calendar"; |
|
|
|
if (this.highlightDates.includes(formatDate)) { |
|
|
|
day.className = "highlight-border"; |
|
|
|
}else if (formatDate === currentDate) { |
|
|
|
day.text = '今天' |
|
|
|
} |
|
|
|
return day; |
|
|
|
}, |
|
|
|
@@ -971,8 +999,11 @@ export default { |
|
|
|
// 点击日期选择 |
|
|
|
onTabClick(value, index) { |
|
|
|
this.current = index; |
|
|
|
this.currentDays = index; |
|
|
|
if (index !== 0) { |
|
|
|
this.currentDays = value; |
|
|
|
let currentDate = new Date(); |
|
|
|
let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天'; |
|
|
|
this.titleLeft = `${leftText}${this.emoName}倾向趋势`; |
|
|
|
if (value === 7) { |
|
|
|
this.defaultOptions.xAxis.data = [ |
|
|
|
"周一", |
|
|
|
"周二", |
|
|
|
@@ -983,13 +1014,67 @@ export default { |
|
|
|
"周日" |
|
|
|
]; |
|
|
|
this.defaultOptions.series = this.weekAndMonthSeries; |
|
|
|
this.initEchart(); |
|
|
|
let dateList = this.getPostDate(currentDate, 6, true); |
|
|
|
console.log("dateList", dateList); |
|
|
|
this.getPsychologiclData('', dateList[0], dateList[1]); |
|
|
|
} else if (value === 0) { |
|
|
|
// 今天 |
|
|
|
this.defaultOptions.xAxis.data = this.xAxisData; |
|
|
|
this.defaultOptions.series = this.defaultSeries; |
|
|
|
this.defaultOptions.series[0].data = this.emotionData; |
|
|
|
this.getPsychologiclData(this.selectDate ? this.selectDate : this .$dayjs(currentDate).format("YYYY-MM-DD")); |
|
|
|
} else { |
|
|
|
// 30天 |
|
|
|
this.defaultOptions.xAxis.data = this.xAxisData; |
|
|
|
this.defaultOptions.series = this.defaultSeries; |
|
|
|
this.defaultOptions.series[0].data = this.emotionData; |
|
|
|
this.initEchart(); |
|
|
|
let dateList = this.getCurrentMonthStaAndEnd(currentDate); |
|
|
|
console.log("dateList", dateList); |
|
|
|
this.getPsychologiclData('', dateList[0], dateList[1]); |
|
|
|
} |
|
|
|
}, |
|
|
|
getCurrentMonthStaAndEnd(currentDate) { |
|
|
|
let list = []; |
|
|
|
let monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 获取本月第一天的日期时间 |
|
|
|
let monthEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59） |
|
|
|
list.push(this.$dayjs(monthStart).format("YYYY-MM-DD")); |
|
|
|
list.push(this.$dayjs(monthEnd).format("YYYY-MM-DD")); |
|
|
|
return list; |
|
|
|
}, |
|
|
|
// 获取指定天数的起始日期 |
|
|
|
/** |
|
|
|
* |
|
|
|
* @param dateNow :Date类 |
|
|
|
* @param intervalDays ：间隔天数 |
|
|
|
* @param bolPastTime ：Boolean,判断在参数date之前，还是之后， |
|
|
|
*/ |
|
|
|
getPostDate(dateNow,intervalDays,bolPastTime) { |
|
|
|
let oneDayTime = 24 * 60 * 60 * 1000; |
|
|
|
let list = []; |
|
|
|
let lastDay; |
|
|
|
|
|
|
|
if(bolPastTime == true){ |
|
|
|
lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime); |
|
|
|
list.push(this.formateDate(lastDay)); |
|
|
|
list.push(this.formateDate(dateNow)); |
|
|
|
}else{ |
|
|
|
lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime); |
|
|
|
list.push(this.formateDate(dateNow)); |
|
|
|
list.push(this.formateDate(lastDay)); |
|
|
|
} |
|
|
|
return list; |
|
|
|
}, |
|
|
|
formateDate(time){ |
|
|
|
let year = time.getFullYear(); |
|
|
|
let month = time.getMonth() + 1; |
|
|
|
let day = time.getDate(); |
|
|
|
if (month < 10) { |
|
|
|
month = '0' + month |
|
|
|
}; |
|
|
|
if (day < 10) { |
|
|
|
day = '0' + day |
|
|
|
}; |
|
|
|
return year + '-' + month + '-' + day + ''; |
|
|
|
}, |
|
|
|
// 字体大小转化 |
|
|
|
fontChar(res) { |
|
|
|
@@ -1020,8 +1105,9 @@ export default { |
|
|
|
// 选择日历具体某一个日期 |
|
|
|
onSelect(value) { |
|
|
|
const selectDate = this.$dayjs(value).format("YYYY-MM-DD"); |
|
|
|
this.dateList[0].text = this.$dayjs(value).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : this.$dayjs(value).format("YYYY-MM-DD"); |
|
|
|
this.dateList[0].text = this.$dayjs(value).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : this.$dayjs(value).format("MM-DD"); |
|
|
|
this.calendarDialogShow = false; |
|
|
|
this.selectDate = selectDate; |
|
|
|
this.getPsychologiclData(selectDate); |
|
|
|
}, |
|
|
|
// 计算字体显示的颜色 |
|
|
|
@@ -1058,7 +1144,9 @@ export default { |
|
|
|
.van-calendar { |
|
|
|
height: 300px; |
|
|
|
.van-calendar__days .van-calendar__day { |
|
|
|
|
|
|
|
width: 27px; |
|
|
|
height: 27px; |
|
|
|
font-size: 12px; |
|
|
|
&.custom-calendar { |
|
|
|
width: 27px; |
|
|
|
height: 27px; |
|
|
|
|
