Browse Source

增加 内部切换情绪

test
chenJinxu 11 months ago
parent
commit
de00ec5a9c
3 changed files with 135 additions and 7 deletions
  1. +39
    -3
      src/views/health/psychological/index.scss
  2. +89
    -3
      src/views/health/psychological/index.vue
  3. +7
    -1
      src/views/health/psychological/report/index.vue

+ 39
- 3
src/views/health/psychological/index.scss View File

@@ -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 {


+ 89
- 3
src/views/health/psychological/index.vue View File

@@ -22,6 +22,19 @@
</div>
</div>
</div>
<!-- 情绪切换 -->
<div class="psy-tab-bar">
<div class="psy-tab-con">
<div class="psy-tab-list">
<div :class="['psy-tab-item', {active: psyCurrent === index, notClick: false}]"
@click="onPsyTabClick(item.name, index)"
v-for="(item, index) in psyList"
:key="index">
<span>{{item.text}}</span>
</div>
</div>
</div>
</div>
<div class="main" v-show="current !== 3">
<div class="top">
<!-- 日期选择 -->
@@ -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
}
})
}


+ 7
- 1
src/views/health/psychological/report/index.vue View File

@@ -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) {


Loading…
Cancel
Save