chenJinxu
/
TelpoH5FrontendWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'feat' into develop

master
JinxChen 1 year ago
parent
b277cb396c e312b1b6f4
commit
f10eef886b
3 changed files with 134 additions and 108 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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 * @Date: 2022-08-17 16:19:13
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-07-06 16:33:08
* @LastEditTime: 2023-07-08 16:26:33
* @FilePath: \TelpoH5FrontendWeb\README.md * @FilePath: \TelpoH5FrontendWeb\README.md
* @description: 项目说明 * @description: 项目说明
--> -->
@@ -627,4 +627,10 @@ update
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 * @Date: 2021-11-20 10:26:39
* @LastEditors: JinxChen * @LastEditors: JinxChen
* @LastEditTime: 2023-07-06 16:27:29
* @LastEditTime: 2023-07-08 16:26:44
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description: * @description:
*/ */
export const VERSION_MODEL = '1.0.77F'; //版本号
export const VERSION_MODEL = '1.0.78F'; //版本号
export const IMAGE_URL = { export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/', production: 'http://zfb.ssjlai.com/web/',
test: '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: '', selectDate: '',
uid: '', uid: '',
// 建议
advice: '', advice: '',
// 底部天数标题
surveyTitle: '' || '7天概览', surveyTitle: '' || '7天概览',
// 路由中的日期
routeDate: '', routeDate: '',
// 路由参数
params: {}, params: {},
// 是否显示帮助
isPopup: false, isPopup: false,
// 结果等级
resultLevel: '', resultLevel: '',
// 轻度级别颜色
mildColor: '#ffde00', mildColor: '#ffde00',
// 中度级别颜色
severeColor: '#ff8a00', severeColor: '#ff8a00',
// 重度级别颜色
moderateColor: '#d70d0d', moderateColor: '#d70d0d',

// 7天和30天最大数据列表
weekAndMonData: [],
}; };
}, },
computed: { computed: {
@@ -417,7 +427,7 @@ export default {
show: true, show: true,
borderWidth: 1, borderWidth: 1,
top: '20%', top: '20%',
left: '3%',
left: '1%',
right: '5%', right: '5%',
bottom: '10%', bottom: '10%',
containLabel: true containLabel: true
@@ -428,7 +438,7 @@ export default {
show: false show: false
}, },
textStyle: { textStyle: {
fontSize: 13
fontSize: 10
}, },
axisTick: { axisTick: {
show: false show: false
@@ -440,16 +450,12 @@ export default {
width: 2 width: 2
} }
}, },
showMinLabel: true, //显示最小值
showMaxLabel: true, //显示最大值
nameLocation: 'center', nameLocation: 'center',
/* boundaryGap: ['5%', '5%'], */
axisLabel: { axisLabel: {
show: true, show: true,
fontSize: 12, fontSize: 12,
/* padding: [0, -15, -20, 0], */ //表示 [上, 右, 下, 左] 的边距
/* margin: 10, */
/* verticalAlign: "bottom" */
showMinLabel: true, //显示最小值
showMaxLabel: true, //显示最大值
}, },
data: this.xAxisData data: this.xAxisData
}, },
@@ -481,7 +487,9 @@ export default {
fontSize: 14, fontSize: 14,
align: "center" align: "center"
}, },
formatter: "{b0}" + "</br>" + "{c0}"
formatter: function(params) {
return params[0].marker + params[0].name + '--' + params[0].value + '</br>'
}
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@@ -489,7 +497,7 @@ export default {
min: 0, min: 0,
interval: 20, interval: 20,
splitNumber : 1, splitNumber : 1,
boundaryGap : [ '20%', '20%' ],
boundaryGap : [ '5%', '5%' ],
nameTextStyle: { nameTextStyle: {
fontSize: 13 fontSize: 13
}, },
@@ -500,7 +508,6 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
fontSize: 13, fontSize: 13,
/* margin: 10 */
}, },
splitLine: { splitLine: {
show: true, show: true,
@@ -517,16 +524,12 @@ export default {
padding: 5, padding: 5,
data: this.emotionData, data: this.emotionData,
symbol: "circle", symbol: "circle",
symbolSize: 8, // 拐点圆的大小
areaStyle: {},
symbolSize: 8,
}, },
{ {
name: `轻度${this.emoName}倾向`, name: `轻度${this.emoName}倾向`,
type: "line", type: "line",
padding: 10,
data: "",
symbol: "circle",
symbolSize: 8, // 拐点圆的大小
data: ""
}, },
{ {
name: `中度${this.emoName}倾向`, name: `中度${this.emoName}倾向`,
@@ -541,7 +544,6 @@ export default {
] ]
}; };
}, },

imei() { imei() {
return this.$store.getters.serialNo; return this.$store.getters.serialNo;
}, },
@@ -651,7 +653,7 @@ export default {
this.initPieEchart(); this.initPieEchart();
}, },
deep: true deep: true
}
},
}, },
created() { created() {
// 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪 // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
@@ -684,7 +686,6 @@ export default {
.format() .format()
); );
} }
console.log("当前情绪是", EmotionModel[params.name].name);
} }
}, },
// 获取这个月中有数据的日期，控制日历组件的日期样式 // 获取这个月中有数据的日期，控制日历组件的日期样式
@@ -698,10 +699,8 @@ export default {
params: { ...reqParams }, params: { ...reqParams },
headers: { 'AuthToken': this.$store.getters.ssjlToken } headers: { 'AuthToken': this.$store.getters.ssjlToken }
}).then(res => { }).then(res => {
console.log("res", res);
if (res.data) { if (res.data) {
let data = res.data.response; let data = res.data.response;
console.log("data", data);
// const mergedArr = [...new Set([...arr1, ...arr2, ...arr3])]; // const mergedArr = [...new Set([...arr1, ...arr2, ...arr3])];
/* let name = this.params.name.charAt(0).toUpperCase()+ this.params.name.slice(1); */ /* let name = this.params.name.charAt(0).toUpperCase()+ this.params.name.slice(1); */
let currentName = this.params.name; 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轴显示数据 // x轴显示数据
if(this.currentDays === 0) { if(this.currentDays === 0) {
// 显示今天数据 // 显示今天数据
@@ -897,6 +902,74 @@ export default {
"MM/DD" "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; this.result = data.Result;
@@ -926,86 +999,33 @@ export default {
this.result = `无${this.emoName}倾向`; this.result = `无${this.emoName}倾向`;
this.defaultSeries = [ 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 => { this.pieRightList = this.pieRightList.map(item => {
item.text = item.text.replace("情绪", this.emoName); item.text = item.text.replace("情绪", this.emoName);
return item; return item;
@@ -1057,7 +1077,7 @@ export default {
let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天'; let leftText = value === 0 ? '今天' : value === 7 ? '7天' : '30天';
this.surveyTitle = value === 7 ? '7天概览' : '30天概览'; this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
if (value === 7) { 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); let dateList = this.getPostDate(currentDate, 6, true);
console.log("dateList", dateList); console.log("dateList", dateList);
this.getPsychologiclData('', dateList[0], dateList[1]); this.getPsychologiclData('', dateList[0], dateList[1]);


Write Preview
Loading…
Cancel
Save