From 861bb7fc0e492731c5809d01d0bff2d2ce6c3d15 Mon Sep 17 00:00:00 2001 From: JinxChen <2183691628@qq.com> Date: Wed, 7 Aug 2024 09:55:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=91=A8=E6=8A=A5=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E5=88=87=E6=8D=A2=EF=BC=8C=E8=BF=9B=E8=A1=8C=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 162 +- src/router/index.js | 2 + src/views/health/psychological/index.scss | 6 +- src/views/health/psychological/index.vue | 173 +- .../psychological/reportDetails/index.scss | 319 +++ .../psychological/reportDetails/index.vue | 2040 +++++++++++++++++ 6 files changed, 2601 insertions(+), 101 deletions(-) create mode 100644 src/views/health/psychological/reportDetails/index.scss create mode 100644 src/views/health/psychological/reportDetails/index.vue diff --git a/package-lock.json b/package-lock.json index b1151ce..1602f5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2250,87 +2250,6 @@ "webpack-chain": "^6.4.0", "webpack-dev-server": "^3.11.0", "webpack-merge": "^4.2.2" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.8.3", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", - "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } - } } }, "@vue/cli-shared-utils": { @@ -15020,6 +14939,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.8.3", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", + "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-router": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", diff --git a/src/router/index.js b/src/router/index.js index 40162f0..c82e175 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -65,6 +65,8 @@ const routes = [ { 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: '/reportDetails', name: 'reportDetails', component: resolve => require(['@/views/health/psychological/reportDetails/index'], resolve) }, // 告警详情-中间页 { path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) }, diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss index d69d08f..c7383a6 100644 --- a/src/views/health/psychological/index.scss +++ b/src/views/health/psychological/index.scss @@ -420,10 +420,12 @@ $newBlue: #638EE4; } .overall { display: flex; - justify-content: space-between; - align-items: center; + justify-content: flex-start; + align-items: flex-start; width: 100%; + .left { + flex-direction: column; p { padding-left: 20px; font-weight: bold; diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index a67b981..e430c12 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -21,7 +21,7 @@ -
+
-
-
+
+
@@ -203,13 +203,48 @@

{{ item.name }}

+ 总评
- 总评 +

{{ item.summary }}

+
+
+ +
+ +
+
+
+
+
+
+ +
+
+ 周报 +

{{ item[1].name }}

+
+
+ 总评 +
+

+ {{ su.summary }} +

+ +
+
@@ -221,7 +256,7 @@
-
+

连续佩戴两周产生对比数据

@@ -385,9 +420,14 @@ export default { startDate: "", //接口需要的开始时间 endDate: "", //接口需要的结束时间 currentEmoName: "", //当前情绪名称 + weekResultList: [], //周报新详情周报列表 }; }, computed: { + // 页面类型，0 保持不动，1显示方式为新页面显示方式 + pageType() { + return Number(this.$route.query.pageType) || 0 + }, anxietyText() { const appTypeList = ['1']; return appTypeList.indexOf(this.$store.getters.appType) > -1 ? `忧郁` : `抑郁` @@ -739,6 +779,9 @@ export default { ); this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); window.document.title = "心理监测"; + if(this.pageType === 1) { + this.getWeekResultAny(); + } }, methods: { loadParams() { @@ -1271,7 +1314,13 @@ export default { this.endDate = dateList[1]; } else { // 周报菜单 - this.getWeekResult(); + + if(this.pageType !== 1) { + this.getWeekResult(); + } else { + this.getWeekResultAny(); + } + } }, // 点击情绪tab @@ -1433,7 +1482,79 @@ export default { onClose() { this.isPopup = false; }, - getWeekResult() { + //循环调用3次 GetWeekResult 接口 + async getWeekResultAny() { + + Promise.all([ + await this.getWeekResultPro(1), + await this.getWeekResultPro(2), + await this.getWeekResultPro(3), + ]).then(res =>{ + let weekResultLists = res.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []) + + let typeMap = {}; + weekResultLists.forEach(item => { + if (!typeMap[item.name]) { + typeMap[item.name] = { + name: item.name, + recordId: [], + summary: [], + summaryLevel: [], + summaryDetails: [], + type: item.type, + + }; + weekResultLists.push(typeMap[item.name]); + } + + typeMap[item.name].recordId.push(item.recordId); + typeMap[item.name].summary.push(item.summary); + typeMap[item.name].summaryLevel.push(item.summaryLevel); + let combinedArray = typeMap[item.name].summary.map((sum, index) => ({summary: sum, summaryLevel: typeMap[item.name].summaryLevel[index]})); + console.log(combinedArray); + typeMap[item.name].summaryDetails = combinedArray + + }); + let array = Object.entries(typeMap); + this.weekResultList = array; + console.log("weekResultLists", this.weekResultList); + console.log("typeMap", typeMap); + }); + + }, + getWeekResultPro(type) { + let baseUrl = + process.env.NODE_ENV === "production" + ? "https://dbmq.rzliot.com/auth_heart" + : "https://dbmq.rzliot.com/heart"; + let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; + let reqParams = { + uid: /* this.uid */ '2023101521270090082', + type: type || this.emoType, + }; + return new Promise(resolve => { + axios + .get(reqUrl, { + params: { ...reqParams }, + /* headers: { 'AccessToken': this.$store.getters.ssjlToken } */ + }).then(res => { + const data = res.data.response; + let summaryList = data.map(item => { + return { + name: item.Name.replace("周报", "") + .replace(/-/g, ".") + .replace(/~/g, "-"), + recordId: item.RecordId, + summary: this.$replaceAll(item.Summary, '抑郁', '忧郁'), + summaryLevel: item.SummaryLevel, + type: item.Type, + }; + }); + resolve(summaryList) + }) + }) + }, + getWeekResult(type) { this.$toast.loading("数据加载中"); let baseUrl = process.env.NODE_ENV === "production" @@ -1441,7 +1562,7 @@ export default { : "https://dbmq.rzliot.com/heart"; let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; let reqParams = { - uid: this.uid /* '2023101521270090082 */, + uid: /* this.uid */ '2023101521270090082', type: this.emoType, }; axios @@ -1468,16 +1589,32 @@ export default { this.$toast.success("数据加载完成"); }); }, - onClickItem(recordId) { - this.$router.push({ - name: "psychologicalReport", - query: { - recordId: recordId, - name: this.currentEmoName, - isShowLeft: true, - uid: this.uid, - }, - }); + onClickItem(item) { + if(this.pageType === 1) { + // 跳转去新的周报详情页 + this.$router.push({ + name: "reportDetails", + query: { + recordId: item.recordId[Number(this.psyCurrent) - 1], + name: this.currentEmoName, + isShowLeft: true, + uid: this.uid, + time: item.name + + }, + }); + } else { + this.$router.push({ + name: "psychologicalReport", + query: { + recordId: item.recordId, + name: this.currentEmoName, + isShowLeft: true, + uid: this.uid, + }, + }); + } + }, }, }; diff --git a/src/views/health/psychological/reportDetails/index.scss b/src/views/health/psychological/reportDetails/index.scss new file mode 100644 index 0000000..2f16c24 --- /dev/null +++ b/src/views/health/psychological/reportDetails/index.scss @@ -0,0 +1,319 @@ +.main-details { + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #F5F5F5; + font-family: Source Han Sans CN; + + .report-details { + height: calc(100vh - 120px); + 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%; + @include center(); + + .list { + display: flex; + justify-content: center; + 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 { + @include center(); + span { + font-size: 12px; + } + } + .status { + padding: 0 5px; + @include center(); + img { + height: 15px; + width: 9px; + padding: 0 3px ; + } + } + } + } + } + } + + .statistics { + position: relative; + padding: 5px 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; + @include center(); + /* align-items: flex-end; */ + .day { + /* padding: 5px; */ + font-size: 28px; + } + + .day-text { + font-size: 12px; + padding: 0 5px; + } + img { + height: 15px; + width: 9px; + } + } + } + } + } + } + } + &.no-data { + @include center(); + flex-direction: column; + p { + font-size: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/views/health/psychological/reportDetails/index.vue b/src/views/health/psychological/reportDetails/index.vue new file mode 100644 index 0000000..0454320 --- /dev/null +++ b/src/views/health/psychological/reportDetails/index.vue @@ -0,0 +1,2040 @@ + + + + + + \ No newline at end of file From 47f06d5eecb62daf23df14987619be4c3dc88d91 Mon Sep 17 00:00:00 2001 From: JinxChen <2183691628@qq.com> Date: Mon, 26 Aug 2024 09:26:37 +0800 Subject: [PATCH 2/2] =?UTF-8?q?update=20-=20=E4=BC=98=E5=8C=96=20=E5=91=A8?= =?UTF-8?q?=E6=8A=A5=E6=B1=87=E6=80=BB=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 + src/views/health/psychological-main/index.vue | 1 + src/views/health/psychological/index.scss | 15 +- src/views/health/psychological/index.vue | 18 +- .../psychological/reportDetails/index.scss | 6 +- .../psychological/reportDetails/index.vue | 215 +++++++++++++++--- 6 files changed, 219 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 69771fb..887c8f2 100644 --- a/README.md +++ b/README.md @@ -1174,3 +1174,8 @@ update - 增加 app打开充值h5跳转到话费查询页面 - 增加 app点击订购套餐提示 + + +`2024.8.21` +update +- 优化 周报汇总切换 \ No newline at end of file diff --git a/src/views/health/psychological-main/index.vue b/src/views/health/psychological-main/index.vue index 04c61b8..9fc9999 100644 --- a/src/views/health/psychological-main/index.vue +++ b/src/views/health/psychological-main/index.vue @@ -89,6 +89,7 @@ export default { }, // 加载路由参数 async loadParams() { + this.$toast.loading("数据加载中"); let params = this.$route.query; if (params) { this.uid = params.uid; diff --git a/src/views/health/psychological/index.scss b/src/views/health/psychological/index.scss index c7383a6..097c66b 100644 --- a/src/views/health/psychological/index.scss +++ b/src/views/health/psychological/index.scss @@ -69,7 +69,7 @@ $newBlue: #638EE4; } } .psy-tab-bar { - height: 40px; + height: 30px; position: relative; margin: 5px 0; padding: 0 10px; @@ -84,7 +84,7 @@ $newBlue: #638EE4; justify-content: space-around; align-items: center; color: #fff; - height: 40px; + height: 30px; width: 100%; /* background-color: red; */ .psy-tab-item { @@ -93,12 +93,12 @@ $newBlue: #638EE4; color: #6D6D6D; height: 100%; width: 100%; - font-size: 18px; + font-size: 14px; border-radius: 20px; @include center(); &.active { color: #FFFFFF; - background-color: #638EE4; + background-color: #189B3BFF; } } } @@ -107,7 +107,8 @@ $newBlue: #638EE4; .main { position: relative; height: calc(100vh - 150px); - overflow: scroll; + overflow-y: scroll; + overflow-x: hidden; .top { flex: 1; .title { @@ -149,6 +150,10 @@ $newBlue: #638EE4; height: 106px; width: 106px; } + #pieChartDay { + height: 106px; + width: 106px; + } } .pie-chart-right { height: 150px; diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue index e430c12..c7c0103 100644 --- a/src/views/health/psychological/index.vue +++ b/src/views/health/psychological/index.vue @@ -766,14 +766,19 @@ export default { // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪 this.loadParams(); this.initEchartText(); - this.getPieData(); + /* this.getPieData(); */ this.getCalendarData(); this.getPsychologiclData(); this.getWeekResult(); }, mounted() { this.initEchart(); - this.current = Number(this.$store.getters.tabClick) || 0; + if(this.params.current) { + this.current = Number(this.params.current); + } else { + this.current = Number(this.$store.getters.tabClick) || 0; + } + this.currentDays = this.calcDaysByTabClick( Number(this.$store.getters.tabClick) ); @@ -1516,7 +1521,7 @@ export default { }); let array = Object.entries(typeMap); - this.weekResultList = array; + this.weekResultList = array.reverse(); console.log("weekResultLists", this.weekResultList); console.log("typeMap", typeMap); }); @@ -1529,7 +1534,7 @@ export default { : "https://dbmq.rzliot.com/heart"; let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; let reqParams = { - uid: /* this.uid */ '2023101521270090082', + uid: this.uid /* '1929285069986332672' */, type: type || this.emoType, }; return new Promise(resolve => { @@ -1562,7 +1567,7 @@ export default { : "https://dbmq.rzliot.com/heart"; let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; let reqParams = { - uid: /* this.uid */ '2023101521270090082', + uid: this.uid /* '1929285069986332672' */, type: this.emoType, }; axios @@ -1599,7 +1604,8 @@ export default { name: this.currentEmoName, isShowLeft: true, uid: this.uid, - time: item.name + time: item.name, + current: 3, }, }); diff --git a/src/views/health/psychological/reportDetails/index.scss b/src/views/health/psychological/reportDetails/index.scss index 2f16c24..2c56ff5 100644 --- a/src/views/health/psychological/reportDetails/index.scss +++ b/src/views/health/psychological/reportDetails/index.scss @@ -6,7 +6,7 @@ font-family: Source Han Sans CN; .report-details { - height: calc(100vh - 120px); + height: calc(100vh - 88px); overflow: scroll; background-color: #fff; @@ -121,6 +121,10 @@ height: 106px; width: 106px; } + #pieChartDay { + height: 106px; + width: 106px; + } } .pie-chart-right { diff --git a/src/views/health/psychological/reportDetails/index.vue b/src/views/health/psychological/reportDetails/index.vue index 0454320..df91659 100644 --- a/src/views/health/psychological/reportDetails/index.vue +++ b/src/views/health/psychological/reportDetails/index.vue @@ -20,19 +20,6 @@
- -
-
-
-
- {{ item.text }} -
-
-
-
@@ -67,7 +54,7 @@
-
+
@@ -117,9 +104,22 @@
+ +
+
+
+
+ {{ item.text }} +
+
+
+
-
+
@@ -209,7 +209,20 @@
-
+ + +
+
+
+
+ {{ item.text }} +
+
+
+

上周趋势对比

{{ resetDate(weekResult.StartDate, weekResult.EndDate) || "--" }}

@@ -481,6 +494,9 @@ export default { weekResultList: [], //周报新详情周报列表 weekResult: {}, isShowCompare: null, //是否显示周对比 + pieDayEcharts: null, //非周报饼状图 + pieDayData: [], //非周报饼状图 + dayEcharts: null }; }, computed: { @@ -749,6 +765,52 @@ export default { ], }; }, + pieDayOption() { + 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.pieDayData, + }, + ], + }; + }, titleLeft() { let text = this.emoName === "depression" ? "趋势" : ""; let today = ""; @@ -821,27 +883,88 @@ export default { }, deep: true, }, + pieDayData: { + handler(n, o) { + this.initPieDayEchart(); + }, + deep: true, + } }, created() { // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪 this.loadParams(); this.initEchartText(); - this.getPieData(); this.getCalendarData(); + + }, + mounted() { this.getPsychologiclData(); this.getWeekResultDetail(); this.getWeekResult(); - }, - mounted() { - this.initEchart(); - this.current = Number(this.$store.getters.tabClick) || 0; + /* this.initEchart(); */ + if(this.params.current) { + this.current = Number(this.params.current); + } else { + 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 = "心理监测"; + /* window.addEventListener("resize", this.onResize, false); */ }, + destroyed(){ + /* window.removeEventListener("resize", this.onResize, false); */ +}, methods: { + /* onResize(){ + if(this.pieEcharts){ + this.pieEcharts.resize(); + } + if(this.echarts) { + this.echarts.resize(); + } + }, */ + calcWeekImg(cur, last, callBackText) { + let imgurl = ""; + let text = ""; + if (isNotNull(cur) && isNotNull(last) && this.weekAndMonData.length > 0) { + let curNumber = Number(cur); + let latNumber = Number(last); + if (curNumber - latNumber == 0) { + text = "持平"; + } else { + imgurl = curNumber < latNumber ? this.downImg : this.upImg; + text = Math.abs(curNumber - latNumber) + "天"; + } + if (callBackText) { + return text; + } else { + return imgurl; + } + } + }, + // 计算显示是上升or下降的图片 + /** + * + * @param { 本周情绪比例} current + * @param { 上周情绪比例 } last + * @param { 是否返回对比比例 } isCallBackCompare + */ + calcImg(current, last, isCallBackCompare) { + let imgUrl = ""; + let compare = ""; + if (isNotNull(current) && isNotNull(last)) { + compare = Number(current) - Number(last); + imgUrl = compare > 0 ? this.upImg : compare == 0 ? "" : this.downImg; + } + if (isCallBackCompare) { + return compare; + } else { + return imgUrl; + } + }, loadParams() { let params = this.$route.query; if (params) { @@ -1011,7 +1134,7 @@ export default { this.pieRightList.push(Mild); this.pieRightList.push(Moderate); this.pieRightList.push(Severe); - this.pieData = this.pieRightList.map((item) => { + this.pieDayData = this.pieRightList.map((item) => { item.value = item.count; item.itemStyle = { color: item.color, @@ -1305,6 +1428,20 @@ export default { } this.pieEcharts = this.$echarts.init(this.$refs.pieChart); this.pieEcharts.setOption(this.pieOption); + + + + }, + initPieDayEchart() { + if ( + this.pieDayEcharts != null && + this.pieDayEcharts != "" && + this.pieDayEcharts != undefined + ) { + this.pieDayEcharts.dispose(); + } + this.pieDayEcharts = this.$echarts.init(this.$refs.pieChartDay); + this.pieDayEcharts.setOption(this.pieDayOption); }, // 格式化日期显示参数 formatter(day) { @@ -1327,11 +1464,13 @@ export default { }, // 返回 onNavBack() { - this.params.name = ""; this.$router.replace({ - name: "psychologicalMain", + name: "psychological", query: { - ...this.params, + name: this.params.name, + uid: this.params.uid, + pageType: 1, + current: this.params.current }, }); }, @@ -1373,7 +1512,8 @@ export default { } else { // 周报菜单 console.log("点击周报"); - this.getWeekResultDetail() + this.onPsyTabClick(this.psyList[this.psyCurrent].name, this.psyCurrent); + /* this.getWeekResultDetail(); */ } }, @@ -1464,15 +1604,31 @@ export default { }, // 初始化折线图表 initEchart() { - if ( + if(this.current === 3) { + // 周报详情 + if ( this.echarts != null && this.echarts != "" && this.echarts != undefined ) { + this.echarts.resize(); this.echarts.dispose(); } this.echarts = this.$echarts.init(this.$refs.charts); this.echarts.setOption(this.defaultOptions); + } else { + if ( + this.dayEcharts != null && + this.dayEcharts != "" && + this.dayEcharts != undefined + ) { + this.dayEcharts.resize(); + this.dayEcharts.dispose(); + } + this.dayEcharts = this.$echarts.init(this.$refs.dayCharts); + this.dayEcharts.setOption(this.defaultOptions); + } + }, // 点击历史监测，打开日历 onHistory() { @@ -1588,7 +1744,7 @@ export default { : "https://dbmq.rzliot.com/heart"; let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; let reqParams = { - uid: /* this.uid */ '2023101521270090082', + uid: this.uid /* '2023101521270090082' */, type: type || this.emoType, }; @@ -1619,7 +1775,7 @@ export default { : "https://dbmq.rzliot.com/heart"; let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; let reqParams = { - uid: /* this.uid */ '2023101521270090082', + uid: this.uid /* '2023101521270090082' */, type: this.emoType, }; return new Promise(resolve => { @@ -1636,6 +1792,7 @@ export default { .replace(/-/g, ".") .replace(/~/g, "-") === time }); + console.log("selectData", selectData); let recordId = selectData && selectData[0].RecordId; console.log("根据当前日期不同emoType得到的周报列表数据", selectData); this.$toast.success("数据加载完成");