diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss index 4fb6667..d69d08f 100644 --- a/src/views/health/psychological/index.scss +++ b/src/views/health/psychological/index.scss @@ -4,7 +4,7 @@ $newBlue: #638EE4; width: 100%; overflow: hidden; background-color: #fff; - .tab-bar { + .tab-bar{ width: 100%; position: relative; .date-tab-con { @@ -68,9 +68,45 @@ $newBlue: #638EE4; } } } + .psy-tab-bar { + height: 40px; + position: relative; + margin: 5px 0; + padding: 0 10px; + .psy-tab-con { + background-color: #EEEEEE; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + .psy-tab-list { + display: flex; + justify-content: space-around; + align-items: center; + color: #fff; + height: 40px; + width: 100%; + /* background-color: red; */ + .psy-tab-item { + position: relative; + padding: 0 10px; + color: #6D6D6D; + height: 100%; + width: 100%; + font-size: 18px; + border-radius: 20px; + @include center(); + &.active { + color: #FFFFFF; + background-color: #638EE4; + } + } + } + } + } .main { position: relative; - height: calc(100vh - 90px); + height: calc(100vh - 150px); overflow: scroll; .top { flex: 1; @@ -334,7 +370,7 @@ $newBlue: #638EE4; } &.report { position: relative; - height: calc(100vh - 90px); + height: calc(100vh - 150px); overflow: scroll; background-color: #f5f5f5; .content { diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index 95232ad..831a799 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -22,6 +22,19 @@ + +
+
+
+
+ {{item.text}} +
+
+
+
@@ -261,6 +274,14 @@ export default { { name: "month", text: "30天", value: 30 }, { name: "weekReport", text: "周报", value: 49 } ], + // 情绪tab + psyList: [ + {name: 'tiredness', text: '疲劳', value: 0}, + {name: 'stress', text: '压力', value: 1}, + {name: 'depression', text: '抑郁', value: 2}, + ], + // 当前情绪下标 + psyCurrent: 0, current: 0, // 日期选择标签-当前选中的标签 currentDays: 0, //日期选择标签-日期参数 emotionData: [], //情绪数据,TODO 接口对接 @@ -382,6 +403,9 @@ export default { moreImg: require("@/assets/img/psychological/more.png"), noDataImg: require("@/assets/img/no_data_01.png"), weekList: [], + startDate: '', //接口需要的开始时间 + endDate: '', //接口需要的结束时间 + currentEmoName: '', //当前情绪名称 }; }, computed: { @@ -713,6 +737,8 @@ export default { mounted() { this.initEchart(); this.current = Number(this.$store.getters.tabClick) || 0; + this.currentDays = this.calcDaysByTabClick(Number(this.$store.getters.tabClick)); + this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); window.document.title = '心理监测'; }, methods: { @@ -724,6 +750,7 @@ export default { this.uid = params.uid; this.routeDate = params.date; this.params = params; + this.currentEmoName = params.name; if(params.date) { this.dateList[0].text = this.$dayjs(params.date).format("YYYY-MM-DD") === this.$dayjs(new Date()).format("YYYY-MM-DD") ? '今天' : this.$dayjs(params.date).format("MM-DD"); this.defaultDate = new Date( @@ -736,6 +763,44 @@ export default { } } }, + // 计算点击的天数 + calcDaysByTabClick(value) { + let days = ''; + console.log("value", value); + switch(value) { + case 0: + days = 0; + break; + case 1: + days = 7; + break; + case 2: + days = 30; + break; + case 3: + days = 49; + break; + default: break; + }; + return days + }, + // 计算psyTab的下标值 + calcPsyTabindex(type) { + let psyIndex = ''; + switch(type) { + case 1: + psyIndex = 1; + break; + case 2: + psyIndex = 2; + break; + case 3: + psyIndex = 0; + break; + default: break; + }; + return psyIndex + }, // 获取这个月中有数据的日期,控制日历组件的日期样式 getCalendarData() { let currentDate = new Date(); @@ -1162,12 +1227,16 @@ export default { if (value === 7) { let dateList = this.getPostDate(currentDate, 6, true); this.getPsychologiclData('', dateList[0], dateList[1]); + this.startDate = dateList[0]; + this.endDate = dateList[1]; } else if (value === 0) { // 今天 this.defaultOptions.xAxis.data = this.xAxisData; this.defaultOptions.series = this.defaultSeries; this.defaultOptions.series[0].data = this.emotionData; - this.getPsychologiclData(this.selectDate ? this.selectDate : this .$dayjs(currentDate).format("YYYY-MM-DD")); + this.getPsychologiclData(this.selectDate ? this.selectDate : this.$dayjs(currentDate).format("YYYY-MM-DD")); + this.startDate = this.$dayjs(currentDate).format("YYYY-MM-DD"); + this.endDate = this.$dayjs(currentDate).format("YYYY-MM-DD"); } else if(value === 30){ // 30天 this.defaultOptions.xAxis.data = this.xAxisData; @@ -1175,11 +1244,27 @@ export default { this.defaultOptions.series[0].data = this.emotionData; let dateList = this.getPostDate(currentDate, 30, true); this.getPsychologiclData('', dateList[0], dateList[1]); + this.startDate = dateList[0]; + this.endDate = dateList[1]; } else { // 周报菜单 this.getWeekResult(); } }, + // 点击情绪tab + onPsyTabClick(name, index) { + this.psyCurrent = index; + this.emoName = EmotionModel[name].name; + this.currentEmoName = name; + this.emoType = EmotionModel[name].type; + console.log("this.currentDays", this.currentDays); + if(this.currentDays === 49) { + // 即点击了周报,此时调用获取周报接口 + this.getWeekResult(); + } else { + this.getPsychologiclData(this.startDate, this.endDate); + } + }, getCurrentMonthStaAndEnd(currentDate) { let list = []; let monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // 获取本月第一天的日期时间 @@ -1336,8 +1421,9 @@ export default { name: 'psychologicalReport', query: { recordId: recordId, - name: 'depression', - isShowLeft: true + name: this.currentEmoName, + isShowLeft: true, + uid: this.uid } }) } diff --git a/src/views/health/psychological/report/index.vue b/src/views/health/psychological/report/index.vue index 4bd8b5d..0b76975 100644 --- a/src/views/health/psychological/report/index.vue +++ b/src/views/health/psychological/report/index.vue @@ -920,7 +920,13 @@ export default { this.pieEcharts.setOption(this.pieOption); }, onNavBack() { - this.$router.go(-1); + this.$router.push({ + name: 'psychological', + query: { + uid: this.params.uid, + name: this.params.name + } + }); }, // 计算字体显示的颜色 calcColor(value) {