diff --git a/README.md b/README.md index 6f71915..d18f0fc 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -770,4 +770,20 @@ fix update - 心理监测详情 - 修改 温馨提示语 -- 新增 一个周报/月报页面 \ No newline at end of file +- 新增 一个周报/月报页面 + +## v1.0.97 +`2023.11.6` +update +- 心理监测详情 + - 修改 天数选择方式 +- 心理监测周报 + - 增加 周报列表和周报详情接口 + + +## v1.0.98 +`2023.11.7` +fix +- 心理监测详情 + - 修复 图表连线点颜色显示不正确的问题 + - 修复 选项菜单显示异常的问题 \ No newline at end of file diff --git a/src/assets/img/psychological/down.png b/src/assets/img/psychological/down.png new file mode 100644 index 0000000..077e205 Binary files /dev/null and b/src/assets/img/psychological/down.png differ diff --git a/src/assets/img/psychological/more.png b/src/assets/img/psychological/more.png new file mode 100644 index 0000000..8896174 Binary files /dev/null and b/src/assets/img/psychological/more.png differ diff --git a/src/assets/img/psychological/select_down.png b/src/assets/img/psychological/select_down.png new file mode 100644 index 0000000..5ef119f Binary files /dev/null and b/src/assets/img/psychological/select_down.png differ diff --git a/src/assets/img/psychological/statistical_form.png b/src/assets/img/psychological/statistical_form.png new file mode 100644 index 0000000..08f9e30 Binary files /dev/null and b/src/assets/img/psychological/statistical_form.png differ diff --git a/src/assets/img/psychological/up.png b/src/assets/img/psychological/up.png new file mode 100644 index 0000000..a502063 Binary files /dev/null and b/src/assets/img/psychological/up.png differ diff --git a/src/assets/img/psychological/week_report.png b/src/assets/img/psychological/week_report.png new file mode 100644 index 0000000..531c1d4 Binary files /dev/null and b/src/assets/img/psychological/week_report.png differ diff --git a/src/config/models.js b/src/config/models.js index 7f05ebd..a21a90e 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-11-02 09:12:59 + * @LastEditTime: 2023-11-06 09:15:22 * @FilePath: \TelpoH5FrontendWeb\src\config\models.js * @description: */ -export const VERSION_MODEL = '1.0.96F'; //版本号 +export const VERSION_MODEL = '1.0.98F'; //版本号 export const IMAGE_URL = { production: 'http://zfb.ssjlai.com/web/', test: 'http://zfb.ssjlai.com/web/', diff --git a/src/router/index.js b/src/router/index.js index c31845c..39bf12c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,7 +1,7 @@ /* * @Date: 2023-09-21 09:54:53 * @LastEditors: JinxChen - * @LastEditTime: 2023-10-30 11:31:37 + * @LastEditTime: 2023-11-03 09:41:28 * @FilePath: \TelpoH5FrontendWeb\src\router\index.js * @description: */ @@ -62,7 +62,9 @@ const routes = [ // 健康-抑郁，压力和疲劳汇总入口 { path: '/psychologicalMain', name: 'psychologicalMain', component: resolve => require(['@/views/health/psychological-main'], resolve) }, // 周报/月报 - { path: '/psychologicalReport', name: 'psychologicalReport', component: resolve => require(['@/views/health/psychological/report'], resolve) }, + { path: '/psychologicalReport', name: 'psychologicalReport', component: resolve => require(['@/views/health/psychological/report/index'], resolve) }, + // 周报/月报-入口 + { path: '/psychiclReportEntry', name: 'psychiclReportEntry', component: resolve => require(['@/views/health/psychological/report/report-entry'], resolve) }, // 告警详情-中间页 { path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) }, diff --git a/src/store/index.js b/src/store/index.js index 0681b86..fadbe53 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -23,6 +23,7 @@ export default new Vuex.Store({ ssjlToken: '', fromSsjl: '', active: null, //点击左边树形图下标 + tabClick: '', //心理监测点击tab }, mutations: { imei(state, imei) { @@ -65,6 +66,11 @@ export default new Vuex.Store({ state.active = active; window.localStorage[prefix + 'active'] = active; }, + tabClick(state, tabClick) { + state.tabClick = tabClick; + window.localStorage[prefix + 'tabClick'] = tabClick; + }, + }, getters: { imei: state => { @@ -107,6 +113,11 @@ export default new Vuex.Store({ if (state.active != '') return state.active; return window.localStorage[prefix + 'active'] == null ? '' : window.localStorage[prefix + 'active']; }, + tabClick: state => { + if (state.tabClick != '') return state.tabClick; + return window.localStorage[prefix + 'tabClick'] == null ? '' : window.localStorage[prefix + 'tabClick']; + }, + }, actions: {}, modules: {} diff --git a/src/views/health/psychological-main/index.vue b/src/views/health/psychological-main/index.vue index 17a4531..d2b391c 100644 --- a/src/views/health/psychological-main/index.vue +++ b/src/views/health/psychological-main/index.vue @@ -67,6 +67,7 @@ export default { }, mounted() { this.loadParams(); + this.$store.commit('tabClick', 0); window.document.title = '心理监测'; }, methods: { diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss index d265892..bf6ce58 100644 --- a/src/views/health/psychological/index.scss +++ b/src/views/health/psychological/index.scss @@ -4,54 +4,76 @@ $newBlue: #638EE4; width: 100%; overflow: hidden; background-color: #fff; - .main { - height: calc(100vh - 45px); - overflow: scroll; - .top { - flex: 1; - .tab-bar { - padding: 0 13px 5px 13px; - .date-tab-con { - padding: 5px 0; - height: 30px; - display: flex; - justify-content: flex-start; - align-items: center; - .date-tab-list { - display: flex; - justify-content: flex-start; - align-items: center; - flex: 1; - border-radius: 15px; + .tab-bar { + width: 100%; + position: relative; + .date-tab-con { + display: flex; + justify-content: flex-start; + align-items: center; + background: #F6F6F6; + border: 1px solid #E0E0E0; + .date-tab-list { + display: flex; + justify-content: space-around; + align-items: center; + color: #fff; + flex: 1; + height: 24px; + padding: 10px 0; + .date-tab-item { + position: relative; + padding: 0 10px; + color: #6D6D6D; + font-size: 18px; + @include center(); + img { + height: 25px; + width: 25px; + padding: 0 8px; + } + .more { + width: 10px; + height: 6px; + } + &.active::after { + content: ''; + width: 44px; + position: absolute; + right: 25%; + bottom: -10px; + box-sizing: border-box; + border-bottom: 4px solid #638EE4; + } + &.active { + color: #638EE4; + } + &.notClick { + background-color: $border_color; color: #fff; - .date-tab-item { - height: 30px; - width: 100%; - color: #6D6D6D; - font-size: 18px; - @include center(); - border: 1px solid $newBlue; - &.active { - background-color: $newBlue; - color: #fff; - } - &.notClick { - background-color: $border_color; - color: #fff; - border: 1px solid #fff; - } - } - .date-tab-item:first-child { - border-top-left-radius: 15px; - border-bottom-left-radius: 15px; - } - .date-tab-item:last-child { - border-top-right-radius: 15px; - border-bottom-right-radius: 15px; - } + border: 1px solid #fff; } } + .date-tab-item:nth-child(3) { + border-right: 1px solid #E0E0E0; + } + /* .date-tab-item:first-child { + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + .date-tab-item:last-child { + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } */ } + } + } + .main { + position: relative; + height: calc(100vh - 90px); + overflow: scroll; + .top { + flex: 1; .title { display: flex; justify-content: space-between; @@ -310,7 +332,107 @@ $newBlue: #638EE4; } } } + &.report { + position: relative; + height: calc(100vh - 90px); + overflow: scroll; + background-color: #f5f5f5; + .content { + position: relative; + .list { + position: relative; + + .item { + display: flex; + justify-content: space-between; + align-items: flex-end; + padding: 34px 15px; + background-color: #fff; + margin-bottom: 11px; + .left { + display: flex; + justify-content: flex-start; + align-items: flex-start; + img { + height: 25px; + width: 25px; + } + .middle { + .title, + .overall, + .trend { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 13px; + span, + p { + font-size: 18px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #8d8d8d; + line-height: 30px; + } + } + .title { + span { + padding-right: 20px; + } + p { + color: #282828; + } + } + .overall { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + .left { + p { + padding-left: 20px; + font-weight: bold; + } + } + .right { + img { + height: 15px; + width: 9px; + } + } + } + .trend { + align-items: flex-start; + text-align: left; + } + } + } + .right { + img { + width: 9px; + height: 15px; + } + } + } + &.no-data { + height: calc(100vh - 100px); + width: 100%; + @include center(); + flex-direction: column; + img { + height: 110px; + width: 175px; + } + p { + color: #999; + font-size: 12px; + padding: 20px 0 65px 0; + } + } + } + } + } } + .title { font-size: 16px; } diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index 1c703b8..b99b7ef 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -5,24 +5,25 @@ -
-
- - -
-
-
-
- {{item.text}} -
-
+
+
+
+
+ + {{item.text}} +
+
+
+
+
+
{{ titleLeft }}
@@ -112,13 +113,9 @@
- -
- -
@@ -188,6 +185,46 @@
+ +
+
+
+
+
+ +
+
+ 周报 +

{{ item.name }}

+
+
+
+ 总评 +

{{ item. summary}}

+
+
+ +
+
+ +
+ +
+
+
+
+ +

暂无数据

+
+
+
@@ -220,7 +257,8 @@ export default { dateList: [ { name: "today", text: "今天", value: 0 }, { name: "week", text: "7天", value: 7 }, - { name: "month", text: "30天", value: 30 } + { name: "month", text: "30天", value: 30 }, + { name: "weekReport", text: "周报", value: 49 } ], current: 0, // 日期选择标签-当前选中的标签 currentDays: 0, //日期选择标签-日期参数 @@ -303,13 +341,13 @@ export default { .format() ), // 路由传过来的情绪参数 - emoName: null, + emoName: '', // 默认折线图 Series 配置 defaultSeries: null, // 非日报折线图 Series 配置 weekAndMonthSeries: null, // 当前情绪类型 - emoType: null, + emoType: '', // 结果解读 result: "", // 需要高亮的日期数组 @@ -337,6 +375,12 @@ export default { moderateColor: '#d70d0d', // 7天和30天最大数据列表 weekAndMonData: [], + tabImgUrl: require("@/assets/img/psychological/statistical_form.png"), + selectDownImg: require("@/assets/img/psychological/select_down.png"), + weekImg: require("@/assets/img/psychological/week_report.png"), + moreImg: require("@/assets/img/psychological/more.png"), + noDataImg: require("@/assets/img/no_data_01.png"), + weekList: [], }; }, computed: { @@ -615,7 +659,7 @@ export default { return `${today}${this.emoName}数据图`; }, warmTips() { - return `正常连续佩戴腕表，每半小时计算一个${this.emoName}分值。`; + return `正常连续佩戴腕表，每${ this.emoType == 2 ? '一': '半'}小时计算一个${this.emoName}分值。`; /* return `正常连续佩戴手表，每半小时计算一个${this.emoName}分值，睡眠期间不进行计算。` */ }, title1() { @@ -663,9 +707,11 @@ export default { this.getPieData(); this.getCalendarData(); this.getPsychologiclData(); + this.getWeekResult(); }, mounted() { this.initEchart(); + this.current = Number(this.$store.getters.tabClick) || 0; window.document.title = '心理监测'; }, methods: { @@ -964,6 +1010,30 @@ export default { x: 0, }, }, + { + name: `轻度${this.emoName}倾向`, + type: 'scatter', + symbolSize: 8, + data: '', + }, + { + name: `中度${this.emoName}倾向`, + type: 'scatter', + symbolSize: 8, + data: '', + }, + { + name: `重度${this.emoName}倾向`, + type: 'scatter', + symbolSize: 8, + data: '', + }, + { + name: `无${this.emoName}倾向`, + type: 'scatter', + symbolSize: 8, + data: '', + }, ]; // 点击提示此时为空 this.defaultOptions.tooltip = { @@ -1084,22 +1154,12 @@ export default { onTabClick(value, index) { this.current = index; this.currentDays = value; + this.$store.commit('tabClick', index); let currentDate = new Date(); 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 = this.xAxisData; let dateList = this.getPostDate(currentDate, 6, true); - console.log("dateList", dateList); this.getPsychologiclData('', dateList[0], dateList[1]); } else if (value === 0) { // 今天 @@ -1107,14 +1167,16 @@ export default { 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")); - } else { + } else if(value === 30){ // 30天 this.defaultOptions.xAxis.data = this.xAxisData; this.defaultOptions.series = this.defaultSeries; this.defaultOptions.series[0].data = this.emotionData; let dateList = this.getPostDate(currentDate, 30, true); - console.log("dateList", dateList); this.getPsychologiclData('', dateList[0], dateList[1]); + } else { + // 周报菜单 + this.getWeekResult(); } }, getCurrentMonthStaAndEnd(currentDate) { @@ -1214,20 +1276,20 @@ export default { calcResultColor(value, isCallBackClass) { let color = ""; let className = ""; - switch(value) { - case '0': + switch(Number(value)) { + case 0: color = "#62BD48"; className = 'none'; break; - case '1': + case 1: color = "#ffde00"; className = 'mild'; break; - case '2': + case 2: color = "#ff8a00"; className = 'moderate'; break; - case '3': + case 3: color = "#d70d0d"; className = 'severe'; break; @@ -1241,6 +1303,41 @@ export default { // 关闭poup onClose() { this.isPopup = false; + }, + getWeekResult() { + this.$toast.loading('数据加载中'); + let reqUrl = 'https://dbmq.rzliot.com/heart/api/Data/GetWeekResult'; + let reqParams = { + uid: this.uid/* '2023101521270090082 */, + type: this.emoType + }; + axios.get(reqUrl, { + params: { ...reqParams }, + /* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ + }).then(res => { + console.log("res", res); + const data = res.data.response; + this.weekList = data.map(item => { + return { + name: item.Name.replace('周报', '').replace(/-/g, ".").replace(/~/g, "-"), + recordId: item.RecordId, + summary: item.Summary, + summaryLevel: item.SummaryLevel, + type: this.emoType + } + }); + this.$toast.success('数据加载完成'); + }) + }, + onClickItem(recordId) { + this.$router.push({ + name: 'psychologicalReport', + query: { + recordId: recordId, + name: 'depression', + isShowLeft: true + } + }) } } }; diff --git a/src/views/health/psychological/report.scss b/src/views/health/psychological/report.scss deleted file mode 100644 index 57e1b92..0000000 --- a/src/views/health/psychological/report.scss +++ /dev/null @@ -1,21 +0,0 @@ -.report{ - height: 100vh; - width: 100%; - overflow: hidden; - background-color: #fff; - .main { - height: calc(100vh - 45px); - overflow: scroll; - padding: 5px 15px; - h5 { - font-size: 16px; - } - .overall-rating { - display: flex; - justify-content: flex-start; - align-items: flex-start; - flex-direction: column; - font-size: 14px; - } - } -} \ No newline at end of file diff --git a/src/views/health/psychological/report.vue b/src/views/health/psychological/report.vue deleted file mode 100644 index 5151ffc..0000000 --- a/src/views/health/psychological/report.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - diff --git a/src/views/health/psychological/report/index.scss b/src/views/health/psychological/report/index.scss new file mode 100644 index 0000000..302b71b --- /dev/null +++ b/src/views/health/psychological/report/index.scss @@ -0,0 +1,305 @@ +.report { + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #F5F5F5; + font-family: Source Han Sans CN; + + .main { + height: calc(100vh - 45px); + overflow: scroll; + background-color: #fff; + + .line { + height: 11px; + background-color: $lineGray; + } + + .overall-rating { + padding: 23px 15px; + margin-bottom: 9px; + + .con { + padding: 17px 18px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + font-size: 14px; + background: #FFFFFF; + border: 1px solid #535353; + box-shadow: 4px 5px 0px 0px #638EE4; + border-radius: 5px; + + p { + font-size: 18px; + font-family: Source Han Sans CN; + color: #666666; + + .bold { + color: #282828; + font-weight: bold; + } + } + + .space-between { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + .time { + font-size: 12px; + } + } + + .normal { + font-size: 13px; + line-height: 21px; + text-align: left; + color: #666666; + } + + .bold-pro { + color: #282828; + font-size: 24px; + font-weight: bold; + padding: 12px 0; + } + } + } + + .pie-chart-top { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 23px 15px 16px 15px; + + p { + font-size: 12px; + font-family: Source Han Sans CN; + line-height: 21px; + } + + .bold { + font-size: 18px; + font-weight: bold; + color: #282828; + line-height: 18px; + } + } + + .count { + padding: 0 15px 5px 15px; + text-align: left; + + p { + font-size: 12px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #8B8B8B; + line-height: 18px; + } + } + + .pie-chart-con { + flex: 1; + padding: 5px 0 10px 0; + display: flex; + justify-content: space-between; + align-items: flex-start; + background-color: #fff; + + .pie-chart-left { + position: relative; + height: 150px; + padding-left: 15px; + width: 35%; + @include center(); + + #pieChart { + height: 106px; + width: 106px; + } + } + + .pie-chart-right { + height: 150px; + width: 65%; + padding-right: 20px; + @include center(); + + .list { + flex-direction: column; + + .item { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + padding: 9px 0; + + .item-left { + display: flex; + justify-content: flex-start; + align-items: center; + padding-right: 10px; + + .circle { + height: 12px; + width: 12px; + margin: 0 4px; + } + + span { + font-size: 12px; + } + + .text { + color: #000; + font-size: 12px; + } + } + + .item-right { + display: flex; + justify-content: center; + align-items: center; + } + } + } + } + } + + .statistics { + position: relative; + padding: 0px 14px 5px 14px; + + .list { + flex: 1; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + + .item { + @include center(); + width: 58px; + /* height: px2rem(136); */ + flex-direction: column; + + .top { + font-size: 12px; + } + + .middle { + font-size: 24px; + font-weight: bold; + padding: 5px; + } + + .bottom { + font-size: 9px + } + } + } + } + + .bar-chart { + height: 350px; + background-color: #fff; + padding: 0 5px; + + .echart { + height: 350px; + padding: 0 5px; + } + } + + .advice { + padding: 26px 15px 30px 15px; + + .content { + background: #F2F6FF; + border-radius: 10px; + padding: 20px 15px; + text-align: left; + + p { + font-size: 15px; + font-weight: 400; + color: #707070; + line-height: 23px; + } + + .title { + font-size: 18px; + font-weight: bold; + color: #638EE4; + line-height: 18px; + padding-bottom: 13px; + } + } + } + + .overview { + padding: 0 15px 16px 15px; + + .content { + .title { + text-align: left; + + .title-text { + font-size: 18px; + font-weight: bold; + color: #282828; + line-height: 18px; + } + + .mood-list { + display: grid; + grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布 + grid-template-rows: repeat(2, 1fr); + gap: 21px; + padding: 21px 21px 22px 20px; + + .item { + width: 107px; + height: 94px; + background-color: #F2F6FF; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + padding-left: 30px; + + p { + font-size: 14px; + padding: 0; + color: #666666; + + .day { + /* padding: 5px; */ + font-size: 28px; + } + + .day-text { + font-size: 12px + } + } + } + } + } + } + } + &.no-data { + @include center(); + flex-direction: column; + p { + font-size: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/views/health/psychological/report/index.vue b/src/views/health/psychological/report/index.vue new file mode 100644 index 0000000..7ef1b8c --- /dev/null +++ b/src/views/health/psychological/report/index.vue @@ -0,0 +1,918 @@ + + + + + + diff --git a/src/views/health/psychological/report/report-entry.vue b/src/views/health/psychological/report/report-entry.vue new file mode 100644 index 0000000..c383915 --- /dev/null +++ b/src/views/health/psychological/report/report-entry.vue @@ -0,0 +1,230 @@ + + + + + +