|
|
@@ -25,7 +25,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 标题 --> |
|
|
<!-- 标题 --> |
|
|
<div class="title"> |
|
|
<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"> |
|
|
<div class="title-right" v-show="currentDays === 0"> |
|
|
<p @click="onHistory">历史监测</p> |
|
|
<p @click="onHistory">历史监测</p> |
|
|
</div> |
|
|
</div> |
|
|
@@ -148,16 +148,14 @@ |
|
|
<span class="font-28"><!-- 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 -->{{ advice }}</span> |
|
|
<span class="font-28"><!-- 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 -->{{ advice }}</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="friendly-reminder"> |
|
|
|
|
|
|
|
|
<div class="friendly-reminder" v-if="emoType === 2"> |
|
|
<p :style="{color: currentColor}">友情提示：</p> |
|
|
<p :style="{color: currentColor}">友情提示：</p> |
|
|
|
|
|
|
|
|
<span>继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。</span> |
|
|
|
|
|
|
|
|
<span>如果您发现抑郁倾向分值升高或处于轻度水平，不需要过度紧张，这可能是由正常的情绪波动或者生活习惯（睡眠时间、运动量等）的改变造成的。如果您发现抑郁倾向分值连续7天及以上处于中度或重度水平，建议您寻求家人朋友或心理咨询师的帮助，及早进行干预。</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="warm-reminder"> |
|
|
<div class="warm-reminder"> |
|
|
<p :style="{color: currentColor}">温馨提示：</p> |
|
|
<p :style="{color: currentColor}">温馨提示：</p> |
|
|
|
|
|
|
|
|
<span>继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。</span> |
|
|
|
|
|
|
|
|
<span>{{ warmTips }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@@ -190,6 +188,24 @@ |
|
|
<!-- --> |
|
|
<!-- --> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@@ -250,8 +266,6 @@ export default { |
|
|
{ label: "最小值", value: "40", time: "10:15" }, |
|
|
{ label: "最小值", value: "40", time: "10:15" }, |
|
|
{ label: "最近值", value: "50", time: "18:15" } */ |
|
|
{ label: "最近值", value: "50", time: "18:15" } */ |
|
|
], |
|
|
], |
|
|
// 折线图标题 |
|
|
|
|
|
echartsTitle: "", |
|
|
|
|
|
// 周报-情绪计算 |
|
|
// 周报-情绪计算 |
|
|
emotionList: [ |
|
|
emotionList: [ |
|
|
/* { days: "5", text: "无情绪倾向", color: "#62BD48" }, |
|
|
/* { days: "5", text: "无情绪倾向", color: "#62BD48" }, |
|
|
@@ -294,8 +308,6 @@ export default { |
|
|
defaultSeries: null, |
|
|
defaultSeries: null, |
|
|
// 非日报折线图 Series 配置 |
|
|
// 非日报折线图 Series 配置 |
|
|
weekAndMonthSeries: null, |
|
|
weekAndMonthSeries: null, |
|
|
// 当前情绪颜色 |
|
|
|
|
|
currentColor: null || "#62BD48", |
|
|
|
|
|
// 当前情绪类型 |
|
|
// 当前情绪类型 |
|
|
emoType: null, |
|
|
emoType: null, |
|
|
// 结果解读 |
|
|
// 结果解读 |
|
|
@@ -313,7 +325,9 @@ export default { |
|
|
advice: '', |
|
|
advice: '', |
|
|
surveyTitle: '' || '本周概览', |
|
|
surveyTitle: '' || '本周概览', |
|
|
routeDate: '', |
|
|
routeDate: '', |
|
|
params: {} |
|
|
|
|
|
|
|
|
params: {}, |
|
|
|
|
|
isPopup: false, |
|
|
|
|
|
resultLevel: '' |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@@ -330,7 +344,7 @@ export default { |
|
|
bottom: 20, |
|
|
bottom: 20, |
|
|
top: "3%", |
|
|
top: "3%", |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
fontSize: 18, |
|
|
|
|
|
|
|
|
fontSize: 16, |
|
|
fontWeight: "bold" |
|
|
fontWeight: "bold" |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@@ -342,7 +356,7 @@ export default { |
|
|
bottom: "3%", |
|
|
bottom: "3%", |
|
|
itemHeight: 10, |
|
|
itemHeight: 10, |
|
|
itemWidth: 10, |
|
|
itemWidth: 10, |
|
|
itemGap: 10, |
|
|
|
|
|
|
|
|
itemGap: 5, |
|
|
align: 'auto', |
|
|
align: 'auto', |
|
|
selectedMode: false, |
|
|
selectedMode: false, |
|
|
data: [ |
|
|
data: [ |
|
|
@@ -406,7 +420,7 @@ export default { |
|
|
top: '20%', |
|
|
top: '20%', |
|
|
left: '3%', |
|
|
left: '3%', |
|
|
right: '5%', |
|
|
right: '5%', |
|
|
bottom: '15%', |
|
|
|
|
|
|
|
|
bottom: '10%', |
|
|
containLabel: true |
|
|
containLabel: true |
|
|
}, |
|
|
}, |
|
|
xAxis: { |
|
|
xAxis: { |
|
|
@@ -430,22 +444,22 @@ export default { |
|
|
showMinLabel: true, //显示最小值 |
|
|
showMinLabel: true, //显示最小值 |
|
|
showMaxLabel: true, //显示最大值 |
|
|
showMaxLabel: true, //显示最大值 |
|
|
nameLocation: 'center', |
|
|
nameLocation: 'center', |
|
|
boundaryGap: ['20%', '20%'], |
|
|
|
|
|
|
|
|
/* boundaryGap: ['5%', '5%'], */ |
|
|
axisLabel: { |
|
|
axisLabel: { |
|
|
show: true, |
|
|
show: true, |
|
|
fontSize: 12, |
|
|
fontSize: 12, |
|
|
/* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距 |
|
|
/* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距 |
|
|
margin: 10, |
|
|
|
|
|
|
|
|
/* margin: 10, */ |
|
|
/* verticalAlign: "bottom" */ |
|
|
/* verticalAlign: "bottom" */ |
|
|
}, |
|
|
}, |
|
|
data: this.xAxisData |
|
|
data: this.xAxisData |
|
|
}, |
|
|
}, |
|
|
dataZoom: [ |
|
|
dataZoom: [ |
|
|
{ |
|
|
|
|
|
|
|
|
/* { |
|
|
type: "inside", |
|
|
type: "inside", |
|
|
start: 0, |
|
|
start: 0, |
|
|
end: 100, |
|
|
end: 100, |
|
|
}, |
|
|
|
|
|
|
|
|
}, */ |
|
|
{ |
|
|
{ |
|
|
start: 0, |
|
|
start: 0, |
|
|
end: 100, |
|
|
end: 100, |
|
|
@@ -454,8 +468,8 @@ export default { |
|
|
fontSize: 14 |
|
|
fontSize: 14 |
|
|
}, |
|
|
}, |
|
|
show: true, |
|
|
show: true, |
|
|
/* height: 18, */ |
|
|
|
|
|
bottom: 20, |
|
|
|
|
|
|
|
|
height: 15, |
|
|
|
|
|
bottom: 5, |
|
|
handleStyle: { |
|
|
handleStyle: { |
|
|
borderWidth: 1, |
|
|
borderWidth: 1, |
|
|
borderCap: "square" |
|
|
borderCap: "square" |
|
|
@@ -475,6 +489,8 @@ export default { |
|
|
max: 100, |
|
|
max: 100, |
|
|
min: 0, |
|
|
min: 0, |
|
|
interval: 20, |
|
|
interval: 20, |
|
|
|
|
|
splitNumber : 1, |
|
|
|
|
|
boundaryGap : [ '20%', '20%' ], |
|
|
nameTextStyle: { |
|
|
nameTextStyle: { |
|
|
fontSize: 13 |
|
|
fontSize: 13 |
|
|
}, |
|
|
}, |
|
|
@@ -485,7 +501,7 @@ export default { |
|
|
axisLabel: { |
|
|
axisLabel: { |
|
|
show: true, |
|
|
show: true, |
|
|
fontSize: 13, |
|
|
fontSize: 13, |
|
|
margin: 10 |
|
|
|
|
|
|
|
|
/* margin: 10 */ |
|
|
}, |
|
|
}, |
|
|
splitLine: { |
|
|
splitLine: { |
|
|
show: true, |
|
|
show: true, |
|
|
@@ -499,7 +515,7 @@ export default { |
|
|
{ |
|
|
{ |
|
|
name: `无${this.emoName}倾向`, |
|
|
name: `无${this.emoName}倾向`, |
|
|
type: "line", |
|
|
type: "line", |
|
|
padding: 10, |
|
|
|
|
|
|
|
|
padding: 5, |
|
|
data: this.emotionData, |
|
|
data: this.emotionData, |
|
|
symbol: "circle", |
|
|
symbol: "circle", |
|
|
symbolSize: 8, // 拐点圆的大小 |
|
|
symbolSize: 8, // 拐点圆的大小 |
|
|
@@ -603,7 +619,36 @@ export default { |
|
|
today = this.$dayjs(this.selectDate || this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; |
|
|
today = this.$dayjs(this.selectDate || this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; |
|
|
} |
|
|
} |
|
|
return `${today}${this.emoName}倾向${text}`; |
|
|
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: { |
|
|
watch: { |
|
|
// 监听数据发生变化 初始化各项图表 |
|
|
// 监听数据发生变化 初始化各项图表 |
|
|
@@ -851,6 +896,7 @@ export default { |
|
|
} |
|
|
} |
|
|
// 结果解读 |
|
|
// 结果解读 |
|
|
this.result = data.Result; |
|
|
this.result = data.Result; |
|
|
|
|
|
this.resultLevel = data.ResultLevel; |
|
|
this.advice = data.Advice; |
|
|
this.advice = data.Advice; |
|
|
this.$toast.loading({ |
|
|
this.$toast.loading({ |
|
|
message: '数据加载完成' |
|
|
message: '数据加载完成' |
|
|
@@ -874,7 +920,6 @@ export default { |
|
|
let text = this.emoName === 'depression' ? '趋势' : ''; |
|
|
let text = this.emoName === 'depression' ? '趋势' : ''; |
|
|
let today = this.$dayjs(this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; |
|
|
let today = this.$dayjs(this.defaultDate).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : ''; |
|
|
this.result = `无${this.emoName}倾向`; |
|
|
this.result = `无${this.emoName}倾向`; |
|
|
this.echartsTitle = `${today}${this.emoName}数据图`; |
|
|
|
|
|
this.defaultSeries = [ |
|
|
this.defaultSeries = [ |
|
|
{ |
|
|
{ |
|
|
name: `无${this.emoName}倾向`, |
|
|
name: `无${this.emoName}倾向`, |
|
|
@@ -1145,6 +1190,33 @@ export default { |
|
|
color = ""; |
|
|
color = ""; |
|
|
} |
|
|
} |
|
|
return color; |
|
|
return color; |
|
|
|
|
|
}, |
|
|
|
|
|
// 计算结果采用哪种颜色 |
|
|
|
|
|
calcResultColor(value) { |
|
|
|
|
|
let color = ""; |
|
|
|
|
|
switch(value) { |
|
|
|
|
|
case '0': |
|
|
|
|
|
color = "#62BD48"; |
|
|
|
|
|
break; |
|
|
|
|
|
case '1': |
|
|
|
|
|
color = "#FEC350"; |
|
|
|
|
|
break; |
|
|
|
|
|
case '2': |
|
|
|
|
|
color = "#F86825"; |
|
|
|
|
|
break; |
|
|
|
|
|
case '3': |
|
|
|
|
|
color = "#EB1D15"; |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
return color; |
|
|
|
|
|
}, |
|
|
|
|
|
// 点击帮助 |
|
|
|
|
|
onHelp() { |
|
|
|
|
|
this.isPopup = true; |
|
|
|
|
|
}, |
|
|
|
|
|
// 关闭poup |
|
|
|
|
|
onClose() { |
|
|
|
|
|
this.isPopup = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
