From e312b1b6f45d55373bd0b1d1c5f60dde326a4edf Mon Sep 17 00:00:00 2001 From: JinxChen <2183691628@qq.com> Date: Sat, 8 Jul 2023 16:27:38 +0800 Subject: [PATCH] =?UTF-8?q?update=20-=20=E5=BF=83=E7=90=86=E7=9B=91?= =?UTF-8?q?=E6=B5=8B=E8=AF=A6=E6=83=85=20=20=20=20=20-=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=207=E5=A4=A9=E5=92=8C30=E5=A4=A9=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +- src/config/models.js | 4 +- src/views/health/psychological/index.vue | 228 ++++++++++++----------- 3 files changed, 134 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index 192fe6c..8310d3f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -627,4 +627,10 @@ update update - 心理监测详情 - 修改 心情等级颜色 - - 修改 日历日期边框根据心情等级显示不同的颜色 \ No newline at end of file + - 修改 日历日期边框根据心情等级显示不同的颜色 + +## v1.0.78 +`2023.7.8` +update +- 心理监测详情 + - 修改 7天和30天图表数据展示方式 \ No newline at end of file diff --git a/src/config/models.js b/src/config/models.js index 1688708..27ad75b 100644 --- a/src/config/models.js +++ b/src/config/models.js @@ -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/', diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index 7e03f66..1ff925a 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -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}" + "
" + "{c0}" + formatter: function(params) { + return params[0].marker + params[0].name + '--' + params[0].value + '
' + } }, 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 + '
' + + params[1].marker + '最大值:' + params[1].name + '--' + params[1].value[2] + '
' + + 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]);