Browse Source
Merge branch 'test' of http://183.238.195.77:10081/chenJinxu/TelpoH5FrontendWeb into test
test
18 changed files with 1794 additions and 166 deletions
+ 18
- 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-11-02 09:18:10 | |||||
| * @LastEditTime: 2023-11-06 09:40:20 | |||||
| * @FilePath: \TelpoH5FrontendWeb\README.md | * @FilePath: \TelpoH5FrontendWeb\README.md | ||||
| * @description: 项目说明 | * @description: 项目说明 | ||||
| --> | --> | ||||
| @@ -770,4 +770,20 @@ fix | |||||
| update | update | ||||
| - 心理监测详情 | - 心理监测详情 | ||||
| - 修改 温馨提示语 | - 修改 温馨提示语 | ||||
| - 新增 一个周报/月报页面 | |||||
| - 新增 一个周报/月报页面 | |||||
| ## v1.0.97 | |||||
| `2023.11.6` | |||||
| update | |||||
| - 心理监测详情 | |||||
| - 修改 天数选择方式 | |||||
| - 心理监测周报 | |||||
| - 增加 周报列表和周报详情接口 | |||||
| ## v1.0.98 | |||||
| `2023.11.7` | |||||
| fix | |||||
| - 心理监测详情 | |||||
| - 修复 图表连线点颜色显示不正确的问题 | |||||
| - 修复 选项菜单显示异常的问题 | |||||
BIN
src/assets/img/psychological/down.png
View File
| Before | After |
|---|---|
|
|
| Width: 15 | Height: 23 | Size: 440B |
BIN
src/assets/img/psychological/more.png
View File
| Before | After |
|---|---|
|
|
| Width: 14 | Height: 23 | Size: 661B |
BIN
src/assets/img/psychological/select_down.png
View File
| Before | After |
|---|---|
|
|
| Width: 15 | Height: 9 | Size: 406B |
BIN
src/assets/img/psychological/statistical_form.png
View File
| Before | After |
|---|---|
|
|
| Width: 29 | Height: 29 | Size: 1.1KB |
BIN
src/assets/img/psychological/up.png
View File
| Before | After |
|---|---|
|
|
| Width: 15 | Height: 23 | Size: 419B |
BIN
src/assets/img/psychological/week_report.png
View File
| Before | After |
|---|---|
|
|
| Width: 38 | Height: 38 | Size: 2.6KB |
+ 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-11-02 09:12:59 | |||||
| * @LastEditTime: 2023-11-06 09:15:22 | |||||
| * @FilePath: \TelpoH5FrontendWeb\src\config\models.js | * @FilePath: \TelpoH5FrontendWeb\src\config\models.js | ||||
| * @description: | * @description: | ||||
| */ | */ | ||||
| export const VERSION_MODEL = '1.0.96F'; //版本号 | |||||
| export const VERSION_MODEL = '1.0.98F'; //版本号 | |||||
| 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/', | ||||
+ 4
- 2
src/router/index.js
View File
| @@ -1,7 +1,7 @@ | |||||
| /* | /* | ||||
| * @Date: 2023-09-21 09:54:53 | * @Date: 2023-09-21 09:54:53 | ||||
| * @LastEditors: JinxChen | * @LastEditors: JinxChen | ||||
| * @LastEditTime: 2023-10-30 11:31:37 | |||||
| * @LastEditTime: 2023-11-03 09:41:28 | |||||
| * @FilePath: \TelpoH5FrontendWeb\src\router\index.js | * @FilePath: \TelpoH5FrontendWeb\src\router\index.js | ||||
| * @description: | * @description: | ||||
| */ | */ | ||||
| @@ -62,7 +62,9 @@ const routes = [ | |||||
| // 健康-抑郁，压力和疲劳汇总入口 | // 健康-抑郁，压力和疲劳汇总入口 | ||||
| { path: '/psychologicalMain', name: 'psychologicalMain', component: resolve => require(['@/views/health/psychological-main'], resolve) }, | { 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) }, | { path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) }, | ||||
+ 11
- 0
src/store/index.js
View File
| @@ -23,6 +23,7 @@ export default new Vuex.Store({ | |||||
| ssjlToken: '', | ssjlToken: '', | ||||
| fromSsjl: '', | fromSsjl: '', | ||||
| active: null, //点击左边树形图下标 | active: null, //点击左边树形图下标 | ||||
| tabClick: '', //心理监测点击tab | |||||
| }, | }, | ||||
| mutations: { | mutations: { | ||||
| imei(state, imei) { | imei(state, imei) { | ||||
| @@ -65,6 +66,11 @@ export default new Vuex.Store({ | |||||
| state.active = active; | state.active = active; | ||||
| window.localStorage[prefix + 'active'] = active; | window.localStorage[prefix + 'active'] = active; | ||||
| }, | }, | ||||
| tabClick(state, tabClick) { | |||||
| state.tabClick = tabClick; | |||||
| window.localStorage[prefix + 'tabClick'] = tabClick; | |||||
| }, | |||||
| }, | }, | ||||
| getters: { | getters: { | ||||
| imei: state => { | imei: state => { | ||||
| @@ -107,6 +113,11 @@ export default new Vuex.Store({ | |||||
| if (state.active != '') return state.active; | if (state.active != '') return state.active; | ||||
| return window.localStorage[prefix + 'active'] == null ? '' : window.localStorage[prefix + '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: {}, | actions: {}, | ||||
| modules: {} | modules: {} | ||||
+ 1
- 0
src/views/health/psychological-main/index.vue
View File
| @@ -67,6 +67,7 @@ export default { | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.loadParams(); | this.loadParams(); | ||||
| this.$store.commit('tabClick', 0); | |||||
| window.document.title = '心理监测'; | window.document.title = '心理监测'; | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
+ 166
- 44
src/views/health/psychological/index.scss
View File
| @@ -4,54 +4,76 @@ $newBlue: #638EE4; | |||||
| width: 100%; | width: 100%; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| background-color: #fff; | 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; | 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 { | .title { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | 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 { | .title { | ||||
| font-size: 16px; | font-size: 16px; | ||||
| } | } | ||||
+ 139
- 42
src/views/health/psychological/index.vue
View File
| @@ -5,24 +5,25 @@ | |||||
| <van-icon name="arrow-left" size="24" style="padding: 0"/> | <van-icon name="arrow-left" size="24" style="padding: 0"/> | ||||
| </template> | </template> | ||||
| </van-nav-bar> | </van-nav-bar> | ||||
| <div class="main"> | |||||
| <div class="top"> | |||||
| <!-- 日期选择 --> | |||||
| <!-- TODO 后续可做成一个组件，方便调用 --> | |||||
| <div class="tab-bar"> | |||||
| <div class="date-tab-con"> | |||||
| <div class="date-tab-list"> | |||||
| <div | |||||
| :class="['date-tab-item', {active: current === index, notClick: false}]" | |||||
| @click="onTabClick(item.value, index)" | |||||
| v-for="(item, index) in dateList" | |||||
| :key="index" | |||||
| > | |||||
| <span>{{item.text}}</span> | |||||
| </div> | |||||
| </div> | |||||
| <div class="tab-bar"> | |||||
| <div class="date-tab-con"> | |||||
| <div class="date-tab-list"> | |||||
| <div | |||||
| :class="['date-tab-item', {active: current === index, notClick: false}]" | |||||
| @click="onTabClick(item.value, index)" | |||||
| v-for="(item, index) in dateList" | |||||
| :key="index" | |||||
| > | |||||
| <img :src="tabImgUrl" alt v-if="index == 3"/> | |||||
| <span>{{item.text}}</span> | |||||
| <img class="more" :src="selectDownImg" alt v-if="index == 3"/> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | |||||
| </div> | |||||
| <div class="main" v-show="current !== 3"> | |||||
| <div class="top"> | |||||
| <!-- 日期选择 --> | |||||
| <!-- 标题 --> | <!-- 标题 --> | ||||
| <div class="title"> | <div class="title"> | ||||
| <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp"/></div> | <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp"/></div> | ||||
| @@ -112,13 +113,9 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 分割线 --> | <!-- 分割线 --> | ||||
| <div class="line"></div> | <div class="line"></div> | ||||
| <!-- 底部 --> | <!-- 底部 --> | ||||
| <div class="bottom"> | <div class="bottom"> | ||||
| <div class="echart-container"> | <div class="echart-container"> | ||||
| <div class="echart" ref="charts"></div> | <div class="echart" ref="charts"></div> | ||||
| @@ -188,6 +185,46 @@ | |||||
| <!-- --> | <!-- --> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 周报菜单 --> | |||||
| <div class="main report" v-show="current == 3"> | |||||
| <div class="content"> | |||||
| <div class="list" v-if="weekList"> | |||||
| <div | |||||
| class="item" | |||||
| v-for="(item, index) in weekList" | |||||
| :key="index" | |||||
| @click="onClickItem(item.recordId)" | |||||
| > | |||||
| <div class="left"> | |||||
| <img :src="weekImg" alt /> | |||||
| <div class="middle"> | |||||
| <div class="title"> | |||||
| <span>周报</span> | |||||
| <p>{{ item.name }}</p> | |||||
| </div> | |||||
| <div class="overall"> | |||||
| <div class="left"> | |||||
| <span>总评</span> | |||||
| <p :style="{color: calcResultColor(item.summaryLevel)}">{{ item. summary}}</p> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <div class="trend"> | |||||
| <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p> | |||||
| </div>--> | |||||
| </div> | |||||
| </div> | |||||
| <div class="right"> | |||||
| <img :src="moreImg" alt /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="list no-data" v-else> | |||||
| <img :src="noDataImg" alt /> | |||||
| <p>暂无数据</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 弹出层 --> | <!-- 弹出层 --> | ||||
| <van-popup v-model="isPopup"> | <van-popup v-model="isPopup"> | ||||
| <div class="popup"> | <div class="popup"> | ||||
| @@ -220,7 +257,8 @@ export default { | |||||
| dateList: [ | dateList: [ | ||||
| { name: "today", text: "今天", value: 0 }, | { name: "today", text: "今天", value: 0 }, | ||||
| { name: "week", text: "7天", value: 7 }, | { 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, // 日期选择标签-当前选中的标签 | current: 0, // 日期选择标签-当前选中的标签 | ||||
| currentDays: 0, //日期选择标签-日期参数 | currentDays: 0, //日期选择标签-日期参数 | ||||
| @@ -303,13 +341,13 @@ export default { | |||||
| .format() | .format() | ||||
| ), | ), | ||||
| // 路由传过来的情绪参数 | // 路由传过来的情绪参数 | ||||
| emoName: null, | |||||
| emoName: '', | |||||
| // 默认折线图 Series 配置 | // 默认折线图 Series 配置 | ||||
| defaultSeries: null, | defaultSeries: null, | ||||
| // 非日报折线图 Series 配置 | // 非日报折线图 Series 配置 | ||||
| weekAndMonthSeries: null, | weekAndMonthSeries: null, | ||||
| // 当前情绪类型 | // 当前情绪类型 | ||||
| emoType: null, | |||||
| emoType: '', | |||||
| // 结果解读 | // 结果解读 | ||||
| result: "", | result: "", | ||||
| // 需要高亮的日期数组 | // 需要高亮的日期数组 | ||||
| @@ -337,6 +375,12 @@ export default { | |||||
| moderateColor: '#d70d0d', | moderateColor: '#d70d0d', | ||||
| // 7天和30天最大数据列表 | // 7天和30天最大数据列表 | ||||
| weekAndMonData: [], | 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: { | computed: { | ||||
| @@ -615,7 +659,7 @@ export default { | |||||
| return `${today}${this.emoName}数据图`; | return `${today}${this.emoName}数据图`; | ||||
| }, | }, | ||||
| warmTips() { | warmTips() { | ||||
| return `正常连续佩戴腕表，每半小时计算一个${this.emoName}分值。`; | |||||
| return `正常连续佩戴腕表，每${ this.emoType == 2 ? '一': '半'}小时计算一个${this.emoName}分值。`; | |||||
| /* return `正常连续佩戴手表，每半小时计算一个${this.emoName}分值，睡眠期间不进行计算。` */ | /* return `正常连续佩戴手表，每半小时计算一个${this.emoName}分值，睡眠期间不进行计算。` */ | ||||
| }, | }, | ||||
| title1() { | title1() { | ||||
| @@ -663,9 +707,11 @@ export default { | |||||
| this.getPieData(); | this.getPieData(); | ||||
| this.getCalendarData(); | this.getCalendarData(); | ||||
| this.getPsychologiclData(); | this.getPsychologiclData(); | ||||
| this.getWeekResult(); | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.initEchart(); | this.initEchart(); | ||||
| this.current = Number(this.$store.getters.tabClick) || 0; | |||||
| window.document.title = '心理监测'; | window.document.title = '心理监测'; | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| @@ -964,6 +1010,30 @@ export default { | |||||
| x: 0, | 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 = { | this.defaultOptions.tooltip = { | ||||
| @@ -1084,22 +1154,12 @@ export default { | |||||
| onTabClick(value, index) { | onTabClick(value, index) { | ||||
| this.current = index; | this.current = index; | ||||
| this.currentDays = value; | this.currentDays = value; | ||||
| this.$store.commit('tabClick', index); | |||||
| let currentDate = new Date(); | let currentDate = new Date(); | ||||
| 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 = this.xAxisData; | |||||
| let dateList = this.getPostDate(currentDate, 6, true); | let dateList = this.getPostDate(currentDate, 6, true); | ||||
| console.log("dateList", dateList); | |||||
| this.getPsychologiclData('', dateList[0], dateList[1]); | this.getPsychologiclData('', dateList[0], dateList[1]); | ||||
| } else if (value === 0) { | } else if (value === 0) { | ||||
| // 今天 | // 今天 | ||||
| @@ -1107,14 +1167,16 @@ export default { | |||||
| this.defaultOptions.series = this.defaultSeries; | this.defaultOptions.series = this.defaultSeries; | ||||
| this.defaultOptions.series[0].data = this.emotionData; | 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")); | ||||
| } else { | |||||
| } else if(value === 30){ | |||||
| // 30天 | // 30天 | ||||
| this.defaultOptions.xAxis.data = this.xAxisData; | this.defaultOptions.xAxis.data = this.xAxisData; | ||||
| this.defaultOptions.series = this.defaultSeries; | this.defaultOptions.series = this.defaultSeries; | ||||
| this.defaultOptions.series[0].data = this.emotionData; | this.defaultOptions.series[0].data = this.emotionData; | ||||
| let dateList = this.getPostDate(currentDate, 30, true); | let dateList = this.getPostDate(currentDate, 30, true); | ||||
| console.log("dateList", dateList); | |||||
| this.getPsychologiclData('', dateList[0], dateList[1]); | this.getPsychologiclData('', dateList[0], dateList[1]); | ||||
| } else { | |||||
| // 周报菜单 | |||||
| this.getWeekResult(); | |||||
| } | } | ||||
| }, | }, | ||||
| getCurrentMonthStaAndEnd(currentDate) { | getCurrentMonthStaAndEnd(currentDate) { | ||||
| @@ -1214,20 +1276,20 @@ export default { | |||||
| calcResultColor(value, isCallBackClass) { | calcResultColor(value, isCallBackClass) { | ||||
| let color = ""; | let color = ""; | ||||
| let className = ""; | let className = ""; | ||||
| switch(value) { | |||||
| case '0': | |||||
| switch(Number(value)) { | |||||
| case 0: | |||||
| color = "#62BD48"; | color = "#62BD48"; | ||||
| className = 'none'; | className = 'none'; | ||||
| break; | break; | ||||
| case '1': | |||||
| case 1: | |||||
| color = "#ffde00"; | color = "#ffde00"; | ||||
| className = 'mild'; | className = 'mild'; | ||||
| break; | break; | ||||
| case '2': | |||||
| case 2: | |||||
| color = "#ff8a00"; | color = "#ff8a00"; | ||||
| className = 'moderate'; | className = 'moderate'; | ||||
| break; | break; | ||||
| case '3': | |||||
| case 3: | |||||
| color = "#d70d0d"; | color = "#d70d0d"; | ||||
| className = 'severe'; | className = 'severe'; | ||||
| break; | break; | ||||
| @@ -1241,6 +1303,41 @@ export default { | |||||
| // 关闭poup | // 关闭poup | ||||
| onClose() { | onClose() { | ||||
| this.isPopup = false; | 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 | |||||
| } | |||||
| }) | |||||
| } | } | ||||
| } | } | ||||
| }; | }; | ||||
+ 0
- 21
src/views/health/psychological/report.scss
View File
| @@ -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; | |||||
| } | |||||
| } | |||||
| } | |||||
+ 0
- 53
src/views/health/psychological/report.vue
View File
| @@ -1,53 +0,0 @@ | |||||
| <!-- | |||||
| * @Date: 2023-10-30 11:30:22 | |||||
| * @LastEditors: JinxChen | |||||
| * @LastEditTime: 2023-10-30 15:56:20 | |||||
| * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report.vue | |||||
| * @description: | |||||
| --> | |||||
| <template> | |||||
| <!-- 周/月报 --> | |||||
| <div class="report"> | |||||
| <van-nav-bar title="心理监测周报" :border="true" :left-arrow="true" @click-left="onNavBack"> | |||||
| <template #left> | |||||
| <van-icon name="arrow-left" size="24" style="padding: 0"/> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="main"> | |||||
| <!-- 总评 --> | |||||
| <div class="overall-rating"> | |||||
| <h5>本周总评:</h5> | |||||
| <p>轻度抑郁倾向</p> | |||||
| <p>监测次数: 20次</p> | |||||
| <p>发发发发发个规格egg嘎嘎</p> | |||||
| </div> | |||||
| <!-- 趋势对比-饼状图 --> | |||||
| <div class="pie-chart"></div> | |||||
| <!-- 数据图-柱形图 --> | |||||
| <div class="bar-chart "></div> | |||||
| <!-- 建议 --> | |||||
| <div class="advise"></div> | |||||
| <!-- 概览 --> | |||||
| <div class="overview"></div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name:'', | |||||
| data(){ | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onNavBack() {}, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| @import "./report.scss"; | |||||
| </style> | |||||
+ 305
- 0
src/views/health/psychological/report/index.scss
View File
| @@ -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; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 918
- 0
src/views/health/psychological/report/index.vue
View File
| @@ -0,0 +1,918 @@ | |||||
| <!-- | |||||
| * @Date: 2023-10-30 11:30:22 | |||||
| * @LastEditors: JinxChen | |||||
| * @LastEditTime: 2023-11-07 09:23:17 | |||||
| * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\index.vue | |||||
| * @description: | |||||
| --> | |||||
| <template> | |||||
| <!-- 周/月报 --> | |||||
| <div class="report"> | |||||
| <van-nav-bar title="心理监测周报" :border="true" @click-left="onNavBack"> | |||||
| <template #left > | |||||
| <van-icon name="arrow-left" size="24" style="padding: 0" v-show="params.isShowLeft"/> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="main"> | |||||
| <!-- 总评 --> | |||||
| <div class="overall-rating"> | |||||
| <div class="con"> | |||||
| <p class="space-between"> | |||||
| <span class="bold">本周总评</span> | |||||
| <span class="time">{{ resetDate(weekResult.StartDate,weekResult.EndDate) || '--' }}</span> | |||||
| </p> | |||||
| <p | |||||
| class="bold-pro" | |||||
| :style="{color: calcResultColor(weekResult.SummaryLevel) || '--'}" | |||||
| >{{ weekResult.Summary }}</p> | |||||
| <p class="normal">监测次数: {{ weekResult.Total || '--'}}次</p> | |||||
| <p class="normal">{{ weekResult.Explain || '--' }}</p> | |||||
| </div> | |||||
| </div> | |||||
| <div class="line"></div> | |||||
| <div class="pie-chart-top"> | |||||
| <p class="bold">上周趋势对比</p> | |||||
| <p>{{ resetDate(weekResult.StartDate,weekResult.EndDate) || '--' }}</p> | |||||
| </div> | |||||
| <div class="count"> | |||||
| <p>监测次数：{{ weekResult.Total || '--' }}次</p> | |||||
| </div> | |||||
| <!-- 趋势对比-饼状图 --> | |||||
| <div class="pie-chart-con"> | |||||
| <div class="pie-chart-left"> | |||||
| <div id="pieChart" ref="pieChart"></div> | |||||
| </div> | |||||
| <div class="pie-chart-right"> | |||||
| <div class="list"> | |||||
| <div class="item" v-for="(item, index) in pieRightList" :key="index"> | |||||
| <div class="item-left"> | |||||
| <div class="circle" :style="{backgroundColor: item.color}"></div> | |||||
| <span class="text">{{ item.text || '--' }}</span> | |||||
| </div> | |||||
| <div class="item-right"> | |||||
| <span | |||||
| :style="{color: item.color}" | |||||
| >{{ item.count ? item.count + '次' : '0次'}}</span> | |||||
| <label | |||||
| :style="{color: item.color}" | |||||
| >{{ item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'}}</label> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="statistics"> | |||||
| <div class="list"> | |||||
| <div class="item" v-for="(item, index) in statisticsList" :key="index"> | |||||
| <div class="top"> | |||||
| <span>{{ item.label || '--' }}</span> | |||||
| </div> | |||||
| <div class="middle"> | |||||
| <span :style="{ color: calcColor(item.value)}">{{ item.value || '--' }}</span> | |||||
| </div> | |||||
| <div class="bottom"> | |||||
| <span>{{ item.time || '--' }}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="line"></div> | |||||
| <!-- 数据图-柱形图 --> | |||||
| <div class="bar-chart"> | |||||
| <div class="echart" ref="charts"></div> | |||||
| </div> | |||||
| <div class="line"></div> | |||||
| <!-- 建议 --> | |||||
| <div class="advice"> | |||||
| <div class="content"> | |||||
| <p class="title">健康建议</p> | |||||
| <p>{{ weekResult.Advice || '--' }}</p> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 概览 --> | |||||
| <div class="overview"> | |||||
| <div class="content"> | |||||
| <div class="title"> | |||||
| <span class="title-text">{{ surveyTitle }}</span> | |||||
| <div class="mood-list"> | |||||
| <div class="item" v-for="(item, index) in emotionList" :key="index"> | |||||
| <p> | |||||
| <span :style="{color: item.color}" class="day">{{ item.days }}</span> | |||||
| <span class="day-text">天</span> | |||||
| </p> | |||||
| <p>{{ item.text }}</p> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <div class="mood-list-no-data" v-else> | |||||
| <div class="no-data"> | |||||
| <img src="../../../../assets/img/no_data_01.png" alt /> | |||||
| <p>暂无数据</p> | |||||
| </div> | |||||
| </div>--> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="main no-data"> | |||||
| <img src="../../../../assets/img/no_data_01.png" alt /> | |||||
| <p>暂无数据</p> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { EmotionModel, PsyBaseUrl } from "@/config/models"; | |||||
| import { isNotNull} from "@/utils/index"; | |||||
| import axios from "axios"; | |||||
| import APICore from "@/api/core"; | |||||
| export default { | |||||
| name:'', | |||||
| data(){ | |||||
| return { | |||||
| pieRightList: [ | |||||
| /* { | |||||
| text: "无情绪倾向", | |||||
| count: 12, | |||||
| percentage: "80", | |||||
| color: "#62BD48" | |||||
| }, | |||||
| { | |||||
| text: "轻度情绪倾向", | |||||
| count: 2, | |||||
| percentage: "80", | |||||
| color: "#ffde00" | |||||
| }, | |||||
| { | |||||
| text: "中度情绪倾向", | |||||
| count: 1, | |||||
| percentage: "80", | |||||
| color: "#ff8a00" | |||||
| }, | |||||
| { | |||||
| text: "重度情绪倾向", | |||||
| count: 1, | |||||
| percentage: "80", | |||||
| color: "#d70d0d" | |||||
| } */ | |||||
| ], | |||||
| statisticsList: [ | |||||
| /* { label: "最大值", value: "75", time: "08:15" }, | |||||
| { label: "最小值", value: "40", time: "10:15" }, | |||||
| { label: "最近值", value: "50", time: "18:15" } */ | |||||
| ], | |||||
| emotionList: [], | |||||
| surveyTitle: '本周概览', | |||||
| echarts: null, | |||||
| // 路由传过来的情绪参数 | |||||
| emoName: '', | |||||
| pieData: [], | |||||
| xAxisData: [], | |||||
| pieEcharts: null, | |||||
| monitoringCount: '', | |||||
| // 7天和30天最大数据列表 | |||||
| weekAndMonData: [], | |||||
| defaultSeries: null, | |||||
| defaultLegend: [ | |||||
| { | |||||
| name: `轻度${this.emoName}倾向`, | |||||
| icon: "rect", | |||||
| itemStyle: { | |||||
| color: "#ffde00" | |||||
| }, | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `中度${this.emoName}倾向`, | |||||
| itemStyle: { | |||||
| color: "#ff8a00" | |||||
| }, | |||||
| icon: "rect", | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `重度${this.emoName}倾向`, | |||||
| itemStyle: { | |||||
| color: "#d70d0d", | |||||
| }, | |||||
| icon: "rect", | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `无${this.emoName}倾向`, | |||||
| icon: "rect", | |||||
| itemStyle: { | |||||
| color: "#62BD48" | |||||
| }, | |||||
| textStyle: { | |||||
| // 项目遗留问题，新项目不需重新转换文字大小 | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| ], | |||||
| params: {}, | |||||
| weekResult: {}, | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| this.initEchartText(); | |||||
| }, | |||||
| mounted() { | |||||
| this.loadParams(); | |||||
| this.initEchart(); | |||||
| }, | |||||
| watch: { | |||||
| // 监听数据发生变化 初始化各项图表 | |||||
| emotionData: { | |||||
| handler(n, o) { | |||||
| this.initEchart(); | |||||
| }, | |||||
| deep: true | |||||
| }, | |||||
| xAxisData: { | |||||
| handler(n, o) { | |||||
| this.initEchart(); | |||||
| }, | |||||
| deep: true | |||||
| }, | |||||
| pieData: { | |||||
| handler(n, o) { | |||||
| this.initPieEchart(); | |||||
| }, | |||||
| deep: true | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| // 折线图标题 | |||||
| echartsTitle() { | |||||
| return `${this.emoName}数据图`; | |||||
| }, | |||||
| defaultOptions() { | |||||
| return { | |||||
| time: { | |||||
| useUTC: false | |||||
| }, | |||||
| title: { | |||||
| text: this.echartsTitle, | |||||
| left: 1, | |||||
| right: 25, | |||||
| bottom: 20, | |||||
| top: "3%", | |||||
| textStyle: { | |||||
| fontSize: 18, | |||||
| fontWeight: "bold" | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| width: "65%", | |||||
| orient: "horizontal", | |||||
| right: 'right', | |||||
| top: '3%', | |||||
| bottom: "1%", | |||||
| itemHeight: 12, | |||||
| itemWidth: 12, | |||||
| itemGap: 10, | |||||
| align: 'left', | |||||
| selectedMode: false, | |||||
| data: [ | |||||
| { | |||||
| name: `轻度${this.emoName}倾向`, | |||||
| icon: "rect", | |||||
| itemStyle: { | |||||
| color: "#ffde00" | |||||
| }, | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `中度${this.emoName}倾向`, | |||||
| itemStyle: { | |||||
| color: "#ff8a00" | |||||
| }, | |||||
| icon: "rect", | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `重度${this.emoName}倾向`, | |||||
| itemStyle: { | |||||
| color: "#d70d0d", | |||||
| }, | |||||
| icon: "rect", | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| { | |||||
| name: `无${this.emoName}倾向`, | |||||
| icon: "rect", | |||||
| itemStyle: { | |||||
| color: "#62BD48" | |||||
| }, | |||||
| textStyle: { | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| ], | |||||
| formatter: function(name) { | |||||
| // 自定义显示内容 | |||||
| if (name.length > 6) { | |||||
| return ( | |||||
| name.substring(0, 6) + "\n" + name.substring(6) | |||||
| ); | |||||
| } else { | |||||
| return name; | |||||
| } | |||||
| } | |||||
| }, | |||||
| grid: { | |||||
| show: true, | |||||
| borderWidth: 1, | |||||
| top: '20%', | |||||
| left: '1%', | |||||
| right: '5%', | |||||
| bottom: '15%', | |||||
| containLabel: true | |||||
| }, | |||||
| xAxis: { | |||||
| type: "category", | |||||
| axisLine: { | |||||
| show: false | |||||
| }, | |||||
| textStyle: { | |||||
| fontSize: 10 | |||||
| }, | |||||
| axisTick: { | |||||
| show: false | |||||
| }, | |||||
| splitLine: { | |||||
| show: false, | |||||
| lineStyle: { | |||||
| color: "#ddd", | |||||
| width: 2 | |||||
| } | |||||
| }, | |||||
| nameLocation: 'center', | |||||
| axisLabel: { | |||||
| show: true, | |||||
| fontSize: 12, | |||||
| showMinLabel: true, //显示最小值 | |||||
| showMaxLabel: true, //显示最大值 | |||||
| }, | |||||
| data: this.xAxisData | |||||
| }, | |||||
| dataZoom: [ | |||||
| { | |||||
| type: "inside", | |||||
| start: 0, | |||||
| end: 100, | |||||
| }, | |||||
| { | |||||
| start: 0, | |||||
| end: 100, | |||||
| textStyle: { | |||||
| color: "#FFF", | |||||
| fontSize: 14 | |||||
| }, | |||||
| show: true, | |||||
| height: 25, | |||||
| bottom: '3%', | |||||
| handleStyle: { | |||||
| borderWidth: 1, | |||||
| borderCap: "square" | |||||
| } | |||||
| } | |||||
| ], | |||||
| tooltip: { | |||||
| trigger: "axis", | |||||
| textStyle: { | |||||
| fontSize: 14, | |||||
| align: "center" | |||||
| }, | |||||
| formatter: function(params) { | |||||
| return params[0].marker + params[0].name + '--' + params[0].value + '</br>' | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| type: "value", | |||||
| max: 100, | |||||
| min: 0, | |||||
| interval: 20, | |||||
| splitNumber : 1, | |||||
| boundaryGap : [ '5%', '5%' ], | |||||
| nameTextStyle: { | |||||
| fontSize: 13 | |||||
| }, | |||||
| alignTicks: true, | |||||
| axisTick: { | |||||
| show: true | |||||
| }, | |||||
| axisLabel: { | |||||
| show: true, | |||||
| fontSize: 13, | |||||
| }, | |||||
| splitLine: { | |||||
| show: true, | |||||
| lineStyle: { | |||||
| color: "#ddd", | |||||
| width: 1 | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [ | |||||
| { | |||||
| name: `无${this.emoName}倾向`, | |||||
| type: "line", | |||||
| padding: 5, | |||||
| data: this.emotionData, | |||||
| symbol: "circle", | |||||
| symbolSize: 8, | |||||
| }, | |||||
| { | |||||
| name: `轻度${this.emoName}倾向`, | |||||
| type: "line", | |||||
| data: "" | |||||
| }, | |||||
| { | |||||
| name: `中度${this.emoName}倾向`, | |||||
| type: "line", | |||||
| data: "" | |||||
| }, | |||||
| { | |||||
| name: `重度${this.emoName}倾向`, | |||||
| type: "line", | |||||
| data: "" | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| // 饼状图配置 | |||||
| pieOption() { | |||||
| return { | |||||
| tooltip: { | |||||
| trigger: "item", | |||||
| textStyle: { | |||||
| fontSize: 14 | |||||
| }, | |||||
| position: "right" | |||||
| }, | |||||
| legend: { | |||||
| top: "5%", | |||||
| left: "center", | |||||
| show: false | |||||
| }, | |||||
| series: [ | |||||
| { | |||||
| type: "pie", | |||||
| radius: ["40%", "80%"], | |||||
| avoidLabelOverlap: false, | |||||
| startAngle: 270, // 设置逆时针渲染 | |||||
| itemStyle: { | |||||
| borderRadius: 5, | |||||
| borderColor: "#fff", | |||||
| borderWidth: 2, | |||||
| fontSize: 16 | |||||
| }, | |||||
| label: { | |||||
| show: false, | |||||
| position: "center", | |||||
| fontSize: 16 | |||||
| }, | |||||
| emphasis: { | |||||
| label: { | |||||
| show: false, | |||||
| fontSize: 16, | |||||
| fontWeight: "bold" | |||||
| } | |||||
| }, | |||||
| labelLine: { | |||||
| show: false | |||||
| }, | |||||
| data: this.pieData | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| }, | |||||
| methods: { | |||||
| async loadParams() { | |||||
| let params = this.$route.query; | |||||
| if (params) { | |||||
| this.params = params; | |||||
| if(!params.accessToken) { | |||||
| let authToken = await this.getAuth(); | |||||
| this.$store.commit('ssjlToken', authToken); | |||||
| } else { | |||||
| this.$store.commit('ssjlToken', params.accessToken); | |||||
| } | |||||
| this.getWeekResultDetail(); | |||||
| } | |||||
| }, | |||||
| // 获取b端token | |||||
| getAuth() { | |||||
| let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; | |||||
| let that = this; | |||||
| return new Promise((resolve, reject) => { | |||||
| APICore.getAuth({ manufactorId: manufactorId }).then(res => { | |||||
| let data = res.data; | |||||
| if(data.code === 0) { | |||||
| resolve(res.data.data); | |||||
| } else { | |||||
| this.$toast.fail(`${data.message}`); | |||||
| reject(''); | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| initEchartText( ) { | |||||
| this.defaultSeries = [ | |||||
| { | |||||
| 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: "" | |||||
| } | |||||
| ]; | |||||
| }, | |||||
| calcTitle(type) { | |||||
| let title = ''; | |||||
| switch(type) { | |||||
| case 1: | |||||
| title = '压力' | |||||
| break; | |||||
| case 2: | |||||
| title = '抑郁' | |||||
| break; | |||||
| case 3: | |||||
| title = '疲劳' | |||||
| break; | |||||
| default: break; | |||||
| }; | |||||
| return title; | |||||
| }, | |||||
| getWeekResultDetail() { | |||||
| this.$toast.loading('数据加载中'); | |||||
| let reqUrl = 'https://dbmq.rzliot.com/heart/api/Data/GetWeekResultDetail'; | |||||
| let reqParams = { | |||||
| recordId: this.params.recordId, | |||||
| }; | |||||
| axios.get(reqUrl, { | |||||
| params: { ...reqParams }, | |||||
| /* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ | |||||
| }).then(res => { | |||||
| console.log("res", res); | |||||
| const data = res.data.response; | |||||
| let chartData = data.ChartData ? (JSON.parse(data.ChartData)).filter(item => {return item.Key}) : []; | |||||
| console.log("图表数据", chartData); | |||||
| if(data) { | |||||
| this.monitoringCount = data.Total; | |||||
| this.pieRightList = []; | |||||
| this.statisticsList = []; | |||||
| this.emotionList = []; | |||||
| this.weekResult = data; | |||||
| this.emoName = this.calcTitle(data.Type); | |||||
| } | |||||
| let None = { | |||||
| count: data.None, | |||||
| percentage: this.calcPercentage( | |||||
| data.None, | |||||
| data.Count | |||||
| ), | |||||
| text: `无${this.emoName}倾向`, | |||||
| color: "#62BD48" | |||||
| }; | |||||
| let Mild = { | |||||
| count: data.Mild, | |||||
| percentage: this.calcPercentage( | |||||
| data.Mild, | |||||
| data.Count | |||||
| ), | |||||
| text: `轻度${this.emoName}倾向`, | |||||
| color: "#ffde00" | |||||
| }; | |||||
| let Moderate = { | |||||
| count: data.Moderate, | |||||
| percentage: this.calcPercentage( | |||||
| data.Moderate, | |||||
| data.Count | |||||
| ), | |||||
| text: `中度${this.emoName}倾向`, | |||||
| color: "#ff8a00" | |||||
| }; | |||||
| let Severe = { | |||||
| count: data.Severe, | |||||
| percentage: this.calcPercentage( | |||||
| data.Severe, | |||||
| data.Count | |||||
| ), | |||||
| text: `重度${this.emoName}倾向`, | |||||
| color: "#d70d0d" | |||||
| }; | |||||
| // 饼状图右边数据 | |||||
| this.pieRightList.push(None); | |||||
| this.pieRightList.push(Mild); | |||||
| this.pieRightList.push(Moderate); | |||||
| this.pieRightList.push(Severe); | |||||
| this.pieData = this.pieRightList.map(item => { | |||||
| item.value = item.count; | |||||
| item.itemStyle = { | |||||
| color: item.color | |||||
| }; | |||||
| return item; | |||||
| }); | |||||
| let Max = { | |||||
| label: "最大值", | |||||
| value: data.Max, | |||||
| time: data.MaxDesc | |||||
| ? this.currentDays === 0 ? this.$dayjs(data.MaxDesc).format("HH:mm") | |||||
| : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm") | |||||
| : "" | |||||
| }; | |||||
| let Min = { | |||||
| label: "最小值", | |||||
| value: data.Min, | |||||
| time: data.MinDesc | |||||
| ? this.currentDays === 0 ? this.$dayjs(data.MinDesc).format("HH:mm") | |||||
| : this.$dayjs(data.MinDesc).format("MM/DD HH:mm") | |||||
| : "" | |||||
| }; | |||||
| let Avg = { | |||||
| label: "平均值", | |||||
| value: data.Avg, | |||||
| time: data.AvgDesc | |||||
| ? this.currentDays === 0 ? this.$dayjs(data.AvgDesc).format("HH:mm") | |||||
| : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm") | |||||
| : "" | |||||
| }; | |||||
| this.statisticsList.push(Max); | |||||
| this.statisticsList.push(Min); | |||||
| this.statisticsList.push(Avg); | |||||
| let NoneDay = { | |||||
| days: data.NoneDay, | |||||
| text: `无${this.emoName}倾向`, | |||||
| color: "#62BD48" | |||||
| }; | |||||
| let MildDay = { | |||||
| days: data.MildDay, | |||||
| text: `轻度${this.emoName}倾向`, | |||||
| color: "#ffde00" | |||||
| }; | |||||
| let ModerateDay = { | |||||
| days: data.ModerateDay, | |||||
| text: `中度${this.emoName}倾向`, | |||||
| color: "#ff8a00" | |||||
| }; | |||||
| let SevereDay = { | |||||
| days: data.SevereDay, | |||||
| text: `重度${this.emoName}倾向`, | |||||
| color: "#d70d0d" | |||||
| }; | |||||
| this.emotionList.push(NoneDay); | |||||
| this.emotionList.push(MildDay); | |||||
| this.emotionList.push(ModerateDay); | |||||
| this.emotionList.push(SevereDay); | |||||
| // 图表数据 | |||||
| this.emotionData = chartData.map(item => { | |||||
| return { | |||||
| value: item.Value, | |||||
| itemStyle: { | |||||
| color: this.calcResultColor(item.Level) | |||||
| } | |||||
| }; | |||||
| }); | |||||
| this.weekAndMonData = chartData.map((item, index) => { | |||||
| return { | |||||
| value: [index, item.MinValue, item.MaxValue], | |||||
| }; | |||||
| }); | |||||
| this.xAxisData = chartData.map(item => { | |||||
| console.log("item", item); | |||||
| return item.Key ? this.$dayjs(item.Key.replace(/-/g, "/")).format( | |||||
| "MM/DD" | |||||
| ) : item.key; | |||||
| }); | |||||
| 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, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| 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 = { | |||||
| trigger: "axis", | |||||
| formatter: function(params) { | |||||
| if(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.$toast.success('数据加载完成'); | |||||
| }) | |||||
| }, | |||||
| initEchart() { | |||||
| if ( | |||||
| this.echarts != null && | |||||
| this.echarts != "" && | |||||
| this.echarts != undefined | |||||
| ) { | |||||
| this.echarts.dispose(); | |||||
| } | |||||
| this.echarts = this.$echarts.init(this.$refs.charts); | |||||
| this.echarts.setOption(this.defaultOptions); | |||||
| }, | |||||
| // 初始化饼状图 | |||||
| initPieEchart() { | |||||
| if ( | |||||
| this.pieEcharts != null && | |||||
| this.pieEcharts != "" && | |||||
| this.pieEcharts != undefined | |||||
| ) { | |||||
| this.pieEcharts.dispose(); | |||||
| } | |||||
| this.pieEcharts = this.$echarts.init(this.$refs.pieChart); | |||||
| this.pieEcharts.setOption(this.pieOption); | |||||
| }, | |||||
| onNavBack() { | |||||
| this.$router.go(-1); | |||||
| }, | |||||
| // 计算字体显示的颜色 | |||||
| calcColor(value) { | |||||
| let color = ""; | |||||
| if (value <= 40) { | |||||
| color = "#62BD48"; | |||||
| } else if (value > 40 && value <= 65) { | |||||
| color = "#ffde00"; | |||||
| } else if (value > 65 && value <= 80) { | |||||
| color = "#ff8a00"; | |||||
| } else if (value > 80) { | |||||
| color = "#d70d0d"; | |||||
| } else { | |||||
| color = ""; | |||||
| } | |||||
| return color; | |||||
| }, | |||||
| // 计算百分比 | |||||
| calcPercentage(value, total) { | |||||
| if ( | |||||
| typeof value !== "number" || | |||||
| typeof total !== "number" || | |||||
| total === 0 | |||||
| ) { | |||||
| return 0; | |||||
| } | |||||
| let milValue = value * 1000; | |||||
| let milTotal = total * 1000; | |||||
| return Math.round((milValue / milTotal) * 100); | |||||
| }, | |||||
| // 计算结果采用哪种颜色 | |||||
| calcResultColor(value, isCallBackClass) { | |||||
| let color = ""; | |||||
| let className = ""; | |||||
| switch(value) { | |||||
| case '0', 0: | |||||
| color = "#62BD48"; | |||||
| className = 'none'; | |||||
| break; | |||||
| case '1', 1: | |||||
| color = "#ffde00"; | |||||
| className = 'mild'; | |||||
| break; | |||||
| case '2', 2: | |||||
| color = "#ff8a00"; | |||||
| className = 'moderate'; | |||||
| break; | |||||
| case '3', 3: | |||||
| color = "#d70d0d"; | |||||
| className = 'severe'; | |||||
| break; | |||||
| } | |||||
| return isCallBackClass ? className : color; | |||||
| }, | |||||
| // 重新拼接日期 | |||||
| resetDate(startDate, endDate) { | |||||
| let callBackDate = ''; | |||||
| if(startDate && endDate) { | |||||
| callBackDate = startDate.replace(/-/g, ".") + '-' + endDate.slice(5,endDate.length).replace(/-/g, "."); | |||||
| }; | |||||
| return callBackDate | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| @import "./index.scss"; | |||||
| </style> | |||||
+ 230
- 0
src/views/health/psychological/report/report-entry.vue
View File
| @@ -0,0 +1,230 @@ | |||||
| <!-- | |||||
| * @Date: 2023-11-03 09:26:51 | |||||
| * @LastEditors: JinxChen | |||||
| * @LastEditTime: 2023-11-04 10:38:00 | |||||
| * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\report-entry.vue | |||||
| * @description: | |||||
| --> | |||||
| <template> | |||||
| <div class="report-main"> | |||||
| <van-nav-bar title="心理监测" :border="true" :left-arrow="true" @click-left="onNavBack"> | |||||
| <template #left> | |||||
| <van-icon name="arrow-left" size="24" style="padding: 0" /> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="main"> | |||||
| <div class="tabs"></div> | |||||
| <div class="content"> | |||||
| <div class="list" v-if="weekList"> | |||||
| <div | |||||
| class="item" | |||||
| v-for="(item, index) in weekList" | |||||
| :key="index" | |||||
| @click="onClickItem(item.recordId)" | |||||
| > | |||||
| <div class="left"> | |||||
| <img :src="weekImg" alt /> | |||||
| <div class="middle"> | |||||
| <div class="title"> | |||||
| <span>周报</span> | |||||
| <p>{{ item.name }}</p> | |||||
| </div> | |||||
| <div class="overall"> | |||||
| <div class="left"> | |||||
| <span>总评</span> | |||||
| <p>{{ item. summary}}</p> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <div class="trend"> | |||||
| <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p> | |||||
| </div>--> | |||||
| </div> | |||||
| </div> | |||||
| <div class="right"> | |||||
| <img :src="moreImg" alt /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="list no-data" v-else> | |||||
| <img src="../../../../assets/img/no_data_01.png" alt /> | |||||
| <p>暂无数据</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { EmotionModel, PsyBaseUrl } from "@/config/models"; | |||||
| import axios from "axios"; | |||||
| export default { | |||||
| name:'', | |||||
| data(){ | |||||
| return { | |||||
| active: 0, | |||||
| 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"), | |||||
| weekList: [], | |||||
| uid: '', | |||||
| emoName: '', | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onNavBack() {}, | |||||
| loadParams() { | |||||
| let params = this.$route.query; | |||||
| if (params) { | |||||
| this.emoName = EmotionModel[params.name].name; | |||||
| this.emoType = EmotionModel[params.name].type; | |||||
| this.uid = params.uid; | |||||
| } | |||||
| }, | |||||
| onClickItem(recordId) { | |||||
| this.$router.push({ | |||||
| name: 'psychologicalReport', | |||||
| query: { | |||||
| recordId: recordId, | |||||
| name: 'depression', | |||||
| isShowLeft: true | |||||
| } | |||||
| }) | |||||
| }, | |||||
| 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('周报', ''), | |||||
| recordId: item.RecordId, | |||||
| summary: item.Summary, | |||||
| type: this.emoType | |||||
| } | |||||
| }); | |||||
| this.$toast.success('数据加载完成'); | |||||
| }) | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.loadParams(); | |||||
| this.getWeekResult(); | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .report-main { | |||||
| height: 100vh; | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| background-color: #f5f5f5; | |||||
| .main { | |||||
| height: calc(100vh - 45px); | |||||
| overflow: scroll; | |||||
| .content { | |||||
| position: relative; | |||||
| .list { | |||||
| .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 - 45px); | |||||
| width: 100%; | |||||
| @include center(); | |||||
| flex-direction: column; | |||||
| img { | |||||
| height: 110px; | |||||
| width: 175px; | |||||
| } | |||||
| p { | |||||
| color: #999; | |||||
| font-size: 12px; | |||||
| padding: 20px 0 65px 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
Loading…