Browse Source

Merge branch 'feat' into develop

master
JinxChen 1 year ago
parent
commit
f10eef886b
3 changed files with 134 additions and 108 deletions
  1. +8
    -2
      README.md
  2. +2
    -2
      src/config/models.js
  3. +124
    -104
      src/views/health/psychological/index.vue

+ 8
- 2
README.md View File

@@ -1,7 +1,7 @@
<!--
* @Date: 2022-08-17 16:19:13
* @LastEditors: JinxChen
* @LastEditTime: 2023-07-06 16:33:08
* @LastEditTime: 2023-07-08 16:26:33
* @FilePath: \TelpoH5FrontendWeb\README.md
* @description: 项目说明
-->
@@ -627,4 +627,10 @@ update
update
- 心理监测详情
- 修改 心情等级颜色
- 修改 日历日期边框根据心情等级显示不同的颜色
- 修改 日历日期边框根据心情等级显示不同的颜色

## v1.0.78
`2023.7.8`
update
- 心理监测详情
- 修改 7天和30天图表数据展示方式

+ 2
- 2
src/config/models.js View File

@@ -1,11 +1,11 @@
/*
* @Date: 2021-11-20 10:26:39
* @LastEditors: JinxChen
* @LastEditTime: 2023-07-06 16:27:29
* @LastEditTime: 2023-07-08 16:26:44
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description:
*/
export const VERSION_MODEL = '1.0.77F'; //版本号
export const VERSION_MODEL = '1.0.78F'; //版本号
export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/',
test: 'http://zfb.ssjlai.com/web/',


+ 124
- 104
src/views/health/psychological/index.vue View File

@@ -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]);


Loading…
Cancel
Save