|
|
|
@@ -59,6 +59,11 @@ |
|
|
|
:style="{color: item.color}" |
|
|
|
>{{ item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'}}</label> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="status"> |
|
|
|
<img :src="calcImg(item.scale)" alt="" /> |
|
|
|
<span v-if="item.scale != 0" :style="{color: item.color}">{{ Math.abs(item.scale)}}%</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@@ -103,6 +108,8 @@ |
|
|
|
<p> |
|
|
|
<span :style="{color: item.color}" class="day">{{ item.days }}</span> |
|
|
|
<span class="day-text">天</span> |
|
|
|
<img :src="calcWeekImg(item.days, item.lastDay)" alt=""> |
|
|
|
<span class="day-text status">{{ calcWeekImg(item.days, item.lastDay, true) }}</span> |
|
|
|
</p> |
|
|
|
<p>{{ item.text }}</p> |
|
|
|
</div> |
|
|
|
@@ -221,6 +228,8 @@ export default { |
|
|
|
], |
|
|
|
params: {}, |
|
|
|
weekResult: {}, |
|
|
|
upImg: require("@/assets/img/psychological/up.png"), |
|
|
|
downImg: require("@/assets/img/psychological/down.png") |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@@ -506,6 +515,30 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
calcWeekImg(cur, last, callBackText) { |
|
|
|
let imgurl = ''; |
|
|
|
let text = ''; |
|
|
|
if(isNotNull(cur) && isNotNull(last) && this.weekAndMonData.length > 0) { |
|
|
|
let curNumber = Number(cur); |
|
|
|
let latNumber = Number(last); |
|
|
|
if(curNumber - latNumber == 0) { |
|
|
|
text = '持平'; |
|
|
|
} else { |
|
|
|
imgurl = curNumber < latNumber ? this.downImg : this.upImg; |
|
|
|
text = Math.abs(curNumber - latNumber) + '天'; |
|
|
|
} |
|
|
|
if(callBackText) { |
|
|
|
return text |
|
|
|
} else { |
|
|
|
return imgurl |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
calcImg(value) { |
|
|
|
let imgUrl = ''; |
|
|
|
imgUrl = value > 0 ? this.upImg : value == 0 ? '' : this.downImg |
|
|
|
return imgUrl; |
|
|
|
}, |
|
|
|
async loadParams() { |
|
|
|
let params = this.$route.query; |
|
|
|
if (params) { |
|
|
|
@@ -592,10 +625,8 @@ export default { |
|
|
|
params: { ...reqParams }, |
|
|
|
/* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ |
|
|
|
}).then(res => { |
|
|
|
console.log("res", res); |
|
|
|
const data = res.data.response; |
|
|
|
let chartData = data.ChartData ? (JSON.parse(data.ChartData)).filter(item => {return item.Key}) : []; |
|
|
|
console.log("图表数据", chartData); |
|
|
|
if(data) { |
|
|
|
this.monitoringCount = data.Total; |
|
|
|
this.pieRightList = []; |
|
|
|
@@ -608,37 +639,41 @@ export default { |
|
|
|
count: data.None, |
|
|
|
percentage: this.calcPercentage( |
|
|
|
data.None, |
|
|
|
data.Count |
|
|
|
data.Total |
|
|
|
), |
|
|
|
text: `无${this.emoName}倾向`, |
|
|
|
color: "#62BD48" |
|
|
|
color: "#62BD48", |
|
|
|
scale: data.NoneRatio |
|
|
|
}; |
|
|
|
let Mild = { |
|
|
|
count: data.Mild, |
|
|
|
percentage: this.calcPercentage( |
|
|
|
data.Mild, |
|
|
|
data.Count |
|
|
|
data.Total |
|
|
|
), |
|
|
|
text: `轻度${this.emoName}倾向`, |
|
|
|
color: "#ffde00" |
|
|
|
color: "#ffde00", |
|
|
|
scale: data.MildRatio |
|
|
|
}; |
|
|
|
let Moderate = { |
|
|
|
count: data.Moderate, |
|
|
|
percentage: this.calcPercentage( |
|
|
|
data.Moderate, |
|
|
|
data.Count |
|
|
|
data.Total |
|
|
|
), |
|
|
|
text: `中度${this.emoName}倾向`, |
|
|
|
color: "#ff8a00" |
|
|
|
color: "#ff8a00", |
|
|
|
scale: data.ModerateRatio |
|
|
|
}; |
|
|
|
let Severe = { |
|
|
|
count: data.Severe, |
|
|
|
percentage: this.calcPercentage( |
|
|
|
data.Severe, |
|
|
|
data.Count |
|
|
|
data.Total |
|
|
|
), |
|
|
|
text: `重度${this.emoName}倾向`, |
|
|
|
color: "#d70d0d" |
|
|
|
color: "#d70d0d", |
|
|
|
scale: data.SevereRatio |
|
|
|
}; |
|
|
|
// 饼状图右边数据 |
|
|
|
this.pieRightList.push(None); |
|
|
|
@@ -682,22 +717,30 @@ export default { |
|
|
|
let NoneDay = { |
|
|
|
days: data.NoneDay, |
|
|
|
text: `无${this.emoName}倾向`, |
|
|
|
color: "#62BD48" |
|
|
|
color: "#62BD48", |
|
|
|
lastDay: data.LastNoneDay, |
|
|
|
scale: data.NoneDayRatio |
|
|
|
}; |
|
|
|
let MildDay = { |
|
|
|
days: data.MildDay, |
|
|
|
text: `轻度${this.emoName}倾向`, |
|
|
|
color: "#ffde00" |
|
|
|
color: "#ffde00", |
|
|
|
lastDay: data.LastMildDay, |
|
|
|
scale: data.MildDayRatio |
|
|
|
}; |
|
|
|
let ModerateDay = { |
|
|
|
days: data.ModerateDay, |
|
|
|
text: `中度${this.emoName}倾向`, |
|
|
|
color: "#ff8a00" |
|
|
|
color: "#ff8a00", |
|
|
|
lastDay: data.LastModerateDay, |
|
|
|
scale: data.ModerateDayRatio |
|
|
|
}; |
|
|
|
let SevereDay = { |
|
|
|
days: data.SevereDay, |
|
|
|
text: `重度${this.emoName}倾向`, |
|
|
|
color: "#d70d0d" |
|
|
|
color: "#d70d0d", |
|
|
|
lastDay: data.LastSevereDay, |
|
|
|
scale: data.SevereDayRatio |
|
|
|
}; |
|
|
|
this.emotionList.push(NoneDay); |
|
|
|
this.emotionList.push(MildDay); |
|
|
|
@@ -718,7 +761,6 @@ export default { |
|
|
|
}; |
|
|
|
}); |
|
|
|
this.xAxisData = chartData.map(item => { |
|
|
|
console.log("item", item); |
|
|
|
return item.Key ? this.$dayjs(item.Key.replace(/-/g, "/")).format( |
|
|
|
"MM/DD" |
|
|
|
) : item.key; |
|
|
|
|
