|
|
|
@@ -317,16 +317,26 @@ export default { |
|
|
|
// 选中的日历日期 |
|
|
|
selectDate: '', |
|
|
|
uid: '', |
|
|
|
// 建议 |
|
|
|
advice: '', |
|
|
|
// 底部天数标题 |
|
|
|
surveyTitle: '' || '7天概览', |
|
|
|
// 路由中的日期 |
|
|
|
routeDate: '', |
|
|
|
// 路由参数 |
|
|
|
params: {}, |
|
|
|
// 是否显示帮助 |
|
|
|
isPopup: false, |
|
|
|
// 结果等级 |
|
|
|
resultLevel: '', |
|
|
|
// 轻度级别颜色 |
|
|
|
mildColor: '#ffde00', |
|
|
|
// 中度级别颜色 |
|
|
|
severeColor: '#ff8a00', |
|
|
|
// 重度级别颜色 |
|
|
|
moderateColor: '#d70d0d', |
|
|
|
|
|
|
|
// 7天和30天最大数据列表 |
|
|
|
weekAndMonData: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@@ -417,7 +427,7 @@ export default { |
|
|
|
show: true, |
|
|
|
borderWidth: 1, |
|
|
|
top: '20%', |
|
|
|
left: '3%', |
|
|
|
left: '1%', |
|
|
|
right: '5%', |
|
|
|
bottom: '10%', |
|
|
|
containLabel: true |
|
|
|
@@ -428,7 +438,7 @@ export default { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
fontSize: 13 |
|
|
|
fontSize: 10 |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
@@ -440,16 +450,12 @@ export default { |
|
|
|
width: 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
showMinLabel: true, //显示最小值 |
|
|
|
showMaxLabel: true, //显示最大值 |
|
|
|
nameLocation: 'center', |
|
|
|
/* boundaryGap: ['5%', '5%'], */ |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
fontSize: 12, |
|
|
|
/* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距 |
|
|
|
/* margin: 10, */ |
|
|
|
/* verticalAlign: "bottom" */ |
|
|
|
showMinLabel: true, //显示最小值 |
|
|
|
showMaxLabel: true, //显示最大值 |
|
|
|
}, |
|
|
|
data: this.xAxisData |
|
|
|
}, |
|
|
|
@@ -481,7 +487,9 @@ 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", |
|
|
|
@@ -489,7 +497,7 @@ export default { |
|
|
|
min: 0, |
|
|
|
interval: 20, |
|
|
|
splitNumber : 1, |
|
|
|
boundaryGap : [ '20%', '20%' ], |
|
|
|
boundaryGap : [ '5%', '5%' ], |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 13 |
|
|
|
}, |
|
|
|
@@ -500,7 +508,6 @@ export default { |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
fontSize: 13, |
|
|
|
/* margin: 10 */ |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
@@ -517,16 +524,12 @@ export default { |
|
|
|
padding: 5, |
|
|
|
data: this.emotionData, |
|
|
|
symbol: "circle", |
|
|
|
symbolSize: 8, // 拐点圆的大小 |
|
|
|
areaStyle: {}, |
|
|
|
symbolSize: 8, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `轻度${this.emoName}倾向`, |
|
|
|
type: "line", |
|
|
|
padding: 10, |
|
|
|
data: "", |
|
|
|
symbol: "circle", |
|
|
|
symbolSize: 8, // 拐点圆的大小 |
|
|
|
data: "" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: `中度${this.emoName}倾向`, |
|
|
|
@@ -541,7 +544,6 @@ export default { |
|
|
|
] |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
imei() { |
|
|
|
return this.$store.getters.serialNo; |
|
|
|
}, |
|
|
|
@@ -651,7 +653,7 @@ export default { |
|
|
|
this.initPieEchart(); |
|
|
|
}, |
|
|
|
deep: true |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪 |
|
|
|
@@ -684,7 +686,6 @@ export default { |
|
|
|
.format() |
|
|
|
); |
|
|
|
} |
|
|
|
console.log("当前情绪是", EmotionModel[params.name].name); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取这个月中有数据的日期，控制日历组件的日期样式 |
|
|
|
@@ -698,10 +699,8 @@ export default { |
|
|
|
params: { ...reqParams }, |
|
|
|
headers: { 'AuthToken': this.$store.getters.ssjlToken } |
|
|
|
}).then(res => { |
|
|
|
console.log("res", res); |
|
|
|
if (res.data) { |
|
|
|
let data = res.data.response; |
|
|
|
console.log("data", data); |
|
|
|
// const mergedArr = [...new Set([...arr1, ...arr2, ...arr3])]; |
|
|
|
/* let name = this.params.name.charAt(0).toUpperCase()+ this.params.name.slice(1); */ |
|
|
|
let currentName = this.params.name; |
|
|
|
@@ -883,6 +882,12 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
}); |
|
|
|
// 7天 和 30天柱形图显示 |
|
|
|
this.weekAndMonData = data.ChartDatas.map((item, index) => { |
|
|
|
return { |
|
|
|
value: [index, item.MinValue, item.MaxValue], |
|
|
|
}; |
|
|
|
}); |
|
|
|
// x轴显示数据 |
|
|
|
if(this.currentDays === 0) { |
|
|
|
// 显示今天数据 |
|
|
|
@@ -897,6 +902,74 @@ 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; |
|
|
|
@@ -926,86 +999,33 @@ export default { |
|
|
|
this.result = `无${this.emoName}倾向`; |
|
|
|
this.defaultSeries = [ |
|
|
|
{ |
|
|
|
name: `无${this.emoName}倾向`, |
|
|
|
type: "line", |
|
|
|
padding: 10, |
|
|
|
data: this.emotionData, |
|
|
|
symbol: "circle", |
|
|
|
symbolSize: 15, // 拐点圆的大小 |
|
|
|
areaStyle: {}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
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; |
|
|
|
@@ -1057,7 +1077,7 @@ export default { |
|
|
|
let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天'; |
|
|
|
this.surveyTitle = value === 7 ? '7天概览' : '30天概览'; |
|
|
|
if (value === 7) { |
|
|
|
this.defaultOptions.xAxis.data = [ |
|
|
|
/* this.defaultOptions.xAxis.data = [ |
|
|
|
"周一", |
|
|
|
"周二", |
|
|
|
"周三", |
|
|
|
@@ -1065,8 +1085,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]); |
|
|
|
|
