共有 8 個檔案被更改，包括 2785 行新增 和 109 行删除
+ 4
- 1
README.md
查看文件
| @@ -1195,4 +1195,7 @@ update | |||
| `2024.8.7` | |||
| fix | |||
| - 修复 心理量表选项起始数调整为0 | |||
| - 修复 心理量表选项起始数调整为0 | |||
| `2024.8.21` | |||
| update | |||
| - 优化 周报汇总切换 | |||
+ 81
- 81
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", | |||
+ 2
- 0
src/router/index.js
查看文件
| @@ -68,6 +68,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) }, | |||
+ 1
- 0
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; | |||
+ 14
- 7
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 { | |||
| @@ -165,6 +166,10 @@ $newBlue: #638EE4; | |||
| height: 106px; | |||
| width: 106px; | |||
| } | |||
| #pieChartDay { | |||
| height: 106px; | |||
| width: 106px; | |||
| } | |||
| } | |||
| .pie-chart-right { | |||
| height: 150px; | |||
| @@ -436,10 +441,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; | |||
+ 163
- 20
src/views/health/psychological/index.vue
查看文件
| @@ -21,7 +21,7 @@ | |||
| </div> | |||
| </div> | |||
| <!-- 情绪切换 --> | |||
| <div class="psy-tab-bar"> | |||
| <div class="psy-tab-bar" v-if="pageType !== 1"> | |||
| <div class="psy-tab-con"> | |||
| <div class="psy-tab-list"> | |||
| <div :class="[ | |||
| @@ -194,8 +194,8 @@ | |||
| <!-- 周报菜单 --> | |||
| <div class="main report" v-show="current == 3"> | |||
| <div class="content"> | |||
| <div class="list" v-if="weekList.length > 0"> | |||
| <div class="item" v-for="(item, index) in weekList" :key="index" @click="onClickItem(item.recordId)"> | |||
| <div class="list" v-if="pageType === 0 && weekList.length > 0"> | |||
| <div class="item" v-for="(item, index) in weekList" :key="index" @click="onClickItem(item)"> | |||
| <div class="left"> | |||
| <img :src="weekImg" alt /> | |||
| <div class="middle"> | |||
| @@ -204,13 +204,48 @@ | |||
| <p>{{ item.name }}</p> | |||
| </div> | |||
| <div class="overall"> | |||
| <span>总评</span> | |||
| <div class="left"> | |||
| <span>总评</span> | |||
| <p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
| {{ item.summary }} | |||
| </p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="right"> | |||
| <img :src="moreImg" alt /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="list" v-if="pageType === 1 && weekResultList.length > 0"> | |||
| <div class="item" v-for="(item, index) in weekResultList" :key="index" @click="onClickItem(item[1])"> | |||
| <div class="left"> | |||
| <img :src="weekImg" alt /> | |||
| <div class="middle"> | |||
| <div class="title"> | |||
| <span>周报</span> | |||
| <p>{{ item[1].name }}</p> | |||
| </div> | |||
| <div class="overall"> | |||
| <span>总评</span> | |||
| <div class="left"> | |||
| <p v-for="(su, index) in item[1].summaryDetails" :key="index" :style="{ color: calcResultColor(su.summaryLevel) }"> | |||
| {{ su.summary }} | |||
| </p> | |||
| <!-- <p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
| {{ item.summary }} | |||
| </p> | |||
| <p :style="{ color: calcResultColor(item.summaryLevel) }"> | |||
| {{ item.summary }} | |||
| </p> | |||
| <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>--> | |||
| @@ -222,7 +257,7 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="list no-data" v-else> | |||
| <div class="list no-data" v-if="weekList.length < 1 && weekResultList.length < 1 "> | |||
| <img :src="noDataImg" alt /> | |||
| <p>连续佩戴两周产生对比数据</p> | |||
| </div> | |||
| @@ -386,9 +421,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 ? `忧郁` : `抑郁` | |||
| @@ -727,19 +767,27 @@ 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) | |||
| ); | |||
| this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); | |||
| window.document.title = "心理监测"; | |||
| if(this.pageType === 1) { | |||
| this.getWeekResultAny(); | |||
| } | |||
| }, | |||
| methods: { | |||
| loadParams() { | |||
| @@ -1272,7 +1320,13 @@ export default { | |||
| this.endDate = dateList[1]; | |||
| } else { | |||
| // 周报菜单 | |||
| this.getWeekResult(); | |||
| if(this.pageType !== 1) { | |||
| this.getWeekResult(); | |||
| } else { | |||
| this.getWeekResultAny(); | |||
| } | |||
| } | |||
| }, | |||
| // 点击情绪tab | |||
| @@ -1445,7 +1499,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.reverse(); | |||
| 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 /* '1929285069986332672' */, | |||
| 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" | |||
| @@ -1453,7 +1579,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 | |||
| @@ -1480,16 +1606,33 @@ 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, | |||
| current: 3, | |||
| }, | |||
| }); | |||
| } else { | |||
| this.$router.push({ | |||
| name: "psychologicalReport", | |||
| query: { | |||
| recordId: item.recordId, | |||
| name: this.currentEmoName, | |||
| isShowLeft: true, | |||
| uid: this.uid, | |||
| }, | |||
| }); | |||
| } | |||
| }, | |||
| }, | |||
| }; | |||
+ 323
- 0
src/views/health/psychological/reportDetails/index.scss
查看文件
| @@ -0,0 +1,323 @@ | |||
| .main-details { | |||
| height: 100vh; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| background-color: #F5F5F5; | |||
| font-family: Source Han Sans CN; | |||
| .report-details { | |||
| height: calc(100vh - 88px); | |||
| 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; | |||
| } | |||
| #pieChartDay { | |||
| 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; | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 2197
- 0
src/views/health/psychological/reportDetails/index.vue
文件差異過大導致無法顯示
查看文件
Loading…