From 51846e022a202a6e8131b0d02c1ba412bce70445 Mon Sep 17 00:00:00 2001 From: chenJinxu <2183691628@qq.com> Date: Thu, 22 Feb 2024 11:15:52 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E5=91=A8=E6=8A=A5?= =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/EchartBox.vue | 30 ++- src/components/TopNavBar.vue | 8 +- src/router/router.config.js | 6 + src/store/index.js | 11 +- src/views/insight/index.vue | 189 +++++++++++----- src/views/insight/reportList.vue | 282 ++++++++++++++++++++++++ src/views/today/index.vue | 118 ++++------ src/views/today/report.vue | 361 ++++++++++++++++--------------- src/views/today/scss/report.scss | 54 ++++- 9 files changed, 732 insertions(+), 327 deletions(-) create mode 100644 src/views/insight/reportList.vue diff --git a/src/components/EchartBox.vue b/src/components/EchartBox.vue index 407890b..062d3e7 100644 --- a/src/components/EchartBox.vue +++ b/src/components/EchartBox.vue @@ -15,13 +15,10 @@
-
+
{{ item.name }}
@@ -70,7 +67,7 @@ export default { }, options: { type: Object, - default: () => {} + default: () => { } }, border: { type: Boolean, @@ -90,7 +87,7 @@ export default { } }, computed: {}, - created() {}, + created() { }, mounted() { this.initEchart(); }, @@ -125,9 +122,11 @@ export default { height: 100%; width: 100%; margin: 20px 0; + .echart-con { position: relative; padding: 20px 0; + .title-out { font-size: 36px; font-weight: bold; @@ -140,31 +139,38 @@ export default { border-radius: 30px; padding: 20px; overflow: hidden; + .legend { flex: 1; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 0; + .left { font-weight: bold; } + .right { .list { display: grid; grid-template-columns: repeat(2, auto); - grid-auto-flow: dense; /* 允许元素在网格中填充空隙 */ + grid-auto-flow: dense; + /* 允许元素在网格中填充空隙 */ grid-gap: 5px; white-space: wrap; + .item { display: flex; justify-content: flex-start; align-items: center; + .shape { height: 14px; width: 14px; margin-right: 10px; } + .text { font-size: 20px; } @@ -172,11 +178,11 @@ export default { } } } + .echart { height: 100%; width: 100%; } } } -} - +} diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue index 51e54ad..2754030 100644 --- a/src/components/TopNavBar.vue +++ b/src/components/TopNavBar.vue @@ -42,7 +42,10 @@ export default { } }, mounted() { - this.getPersonInfo(); + this.$nextTick(() => { + this.getPersonInfo(); + }) + }, methods: { onClickLeft(value) { @@ -60,7 +63,7 @@ export default { const data = res.data.data; if (data) { this.currentPerson = { ...data }; - console.log('this.currentPerson', this.currentPerson); + this.$store.commit('uid', data.physicUid) } }); } @@ -75,6 +78,7 @@ export default { height: 100px; width: 100%; } + .left-img { height: 70px; width: 70px; diff --git a/src/router/router.config.js b/src/router/router.config.js index 1b4ef95..27fb85e 100644 --- a/src/router/router.config.js +++ b/src/router/router.config.js @@ -325,6 +325,12 @@ export const constantRouterMap = [ name: 'personList', component: () => import('@/views/myself/personList'), meta: { title: '用户列表', keepAlive: false } + }, + { + path: '/reportList', + name: 'reportList', + component: () => import('@/views/insight/reportList'), + meta: { title: '周报列表', keepAlive: false } } ] } diff --git a/src/store/index.js b/src/store/index.js index 2ff8f97..dfbb0a8 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -51,7 +51,8 @@ export default new Vuex.Store({ deviceVersion: '', //设备版本号 ssjlToken: '', //b端接口token tabClick: '', //心理监测点击tab - personId: '' //设备列表的personId + personId: '', //设备列表的personId + uid: '' //心理相关用户的uid }, mutations: { authToken(state, token) { @@ -183,6 +184,10 @@ export default new Vuex.Store({ personId(state, personId) { state.personId = personId; window.localStorage[prefix + 'personId'] = personId; + }, + uid(state, uid) { + state.uid = uid; + window.localStorage[prefix + 'uid'] = uid; } }, getters: { @@ -330,6 +335,10 @@ export default new Vuex.Store({ personId: state => { if (state.personId != '') return state.personId; return window.localStorage[prefix + 'personId'] == null ? '' : window.localStorage[prefix + 'personId']; + }, + uid: state => { + if (state.uid != '') return state.uid; + return window.localStorage[prefix + 'uid'] == null ? '' : window.localStorage[prefix + 'uid']; } }, actions: {}, diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue index 2c18678..41d4a43 100644 --- a/src/views/insight/index.vue +++ b/src/views/insight/index.vue @@ -22,26 +22,15 @@
-
+
{{ item.name }}
- +
@@ -61,23 +50,21 @@
-
+
{{ item.name }}
- -
+ + +
+ {{ signsChartTitle }}
@@ -87,16 +74,12 @@
+
-
+
{{ item.day }} 天 @@ -167,6 +150,7 @@ import { /* EmotionModel, */ PsyBaseUrl } from '@/config/models'; import axios from 'axios'; import EchartBox from '@/components/EchartBox'; import APIHealthUser from '@/api/health-user'; +import APIAlarm from '@/api/core'; export default { components: { DateSwitch, @@ -283,7 +267,7 @@ export default { maxDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()), // 默认日历日期时间 defaultDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()), - uid: '2024010809384143241', + // 7天和30天最大数据列表 weekAndMonData: [], weekList: [], @@ -300,8 +284,10 @@ export default { }; }, created() { + this.getAuth(); this.emoName = this.psyList[this.emotionActive].name; this.initEchartText(); + /* this.getPsychologiclData('', '2023-11-21', '2023-12-21'); */ }, mounted() { @@ -318,8 +304,10 @@ export default { start: this.$dayjs(startAndEndDate.start).format('YYYY-MM-DD'), end: this.$dayjs(startAndEndDate.end).format('YYYY-MM-DD') }; + this.$nextTick(() => { + this.updateDate(date); + }); - this.updateDate(date); }, emotionActive(val) { console.log(val); @@ -336,6 +324,12 @@ export default { } }, computed: { + uid() { + return this.$store.getters.uid + }, + signsChartTitle() { + return `${this.signList[this.signActive].name}数据图` + }, degreeMap() { let map = new Map(); this.degreeList.forEach(item => { @@ -517,6 +511,23 @@ export default { } }, methods: { + // 获取b端token + getAuth() { + let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650'; + return new Promise((resove, reject) => { + APIAlarm.getAuth({ manufactorId: manufactorId }) + .then(res => { + let data = res.data; + if (data.code === 0) { + this.$store.commit('ssjlToken', res.data.data); + resove(true); + } + }) + .catch(() => { + reject(false); + }); + }); + }, initEchartText() { this.result = `无${this.emoName}倾向`; this.defaultSeries = [ @@ -850,7 +861,8 @@ export default { this.date = value; console.log('this.date', this.date); this.getPsychologiclData('', value.start, value.end); - this.getReportData('', value.start, value.end); + this.initData(); + //this.getReportData('', value.start, value.end); }, formateDate(time) { let year = time.getFullYear(); @@ -899,8 +911,11 @@ export default { }, getMonthStaEnd(value) { const dateObj = {}; + console.log("时间值", value); const start = startOfMonth(value); const end = endOfMonth(value); + console.log("时间值start", start); + console.log("时间值end", end); dateObj.start = format(start, 'yyyy-MM-dd'); dateObj.end = format(end, 'yyyy-MM-dd'); this.monthDate = { ...dateObj }; @@ -1002,7 +1017,7 @@ export default { data.forEach(item => { xdata.push(item.time); fill.push({ - value: max - item.value, + value: max - item.value || '--', label: { show: false }, @@ -1011,7 +1026,7 @@ export default { } }); ydata.push({ - value: item.value, + value: item.value || '--', label: { show: true }, @@ -1022,7 +1037,7 @@ export default { }); option.xAxis.data = xdata; option.series[0].data = ydata; - option.series[1].data = fill; + /* option.series[1].data = fill; */ }, formateEmotionColor(value) { if (value > 75) { @@ -1048,7 +1063,7 @@ export default { data.forEach(item => { xdata.push(item.date); fill.push({ - value: max - item.value, + value: max - item.value || '--', label: { show: false }, @@ -1058,7 +1073,7 @@ export default { } }); ydata.push({ - value: item.value, + value: item.value || '--', label: { show: false }, @@ -1070,13 +1085,13 @@ export default { }); option.xAxis.data = xdata; option.series[0].data = ydata; - option.series[1].data = fill; + /* option.series[1].data = fill; */ // 规定最小值 option.yAxis.min = 40; // 规定最大值 option.yAxis.max = 150; //设置高压标线 - option.series[1].markLine = { + option.series[0].markLine = { data: [ { symbol: 'pin', @@ -1108,13 +1123,13 @@ export default { let max = 0; data.forEach(item => { if (item.value > max) { - max = item.value; + max = item.value || '--'; } }); data.forEach(item => { xdata.push(item.date); fill.push({ - value: max - item.value, + value: max - item.value || '--', label: { show: false }, @@ -1136,11 +1151,29 @@ export default { }); option.xAxis.data = xdata; option.series[0].data = ydata; - option.series[1].data = fill; + option.series[0].markLine = { + data: [ + { + type: "average", + name: "体温", + yAxis: 37.2, + label: { + fontSize: 14, + position: "end", + }, + lineStyle: { + type: "dashed", + width: 2, + color: "red", + }, + }, + ], + } + /* option.series[1].data = fill; */ // 规定最小值 - option.yAxis.min = 35; + option.yAxis.min = 34.5; // 规定最大值 - option.yAxis.max = max; + option.yAxis.max = 42.5; }, formateTemperatureColor(value) { if (value > 38) { @@ -1197,7 +1230,7 @@ export default { show: true, borderWidth: 0, top: '10%', - left: '10%', + left: '15%', right: '10%', bottom: '20%' }, @@ -1290,7 +1323,7 @@ export default { color: '#189b3b' } }, - { + /* { type: 'bar', barMaxWidth: 15, stack: 'value', @@ -1300,7 +1333,7 @@ export default { borderRadius: [12, 12, 0, 0], show: false } - } + } */ ] }; @@ -1328,7 +1361,7 @@ export default { this.emoName = item.name; this.emoType = item.type; if (this.active == 1) { - this.getMonthStaEnd(this.date); + /* this.getMonthStaEnd(this.date); */ this.getPsychologiclData('', this.monthDate.start, this.monthDate.end); } else { this.getPsychologiclData('', this.date.start, this.date.end); @@ -1341,9 +1374,9 @@ export default { }, onRouterTo(name) { this.$router.push({ - name: name === 'emo' ? 'report' : 'monthReport', + name: name === 'emo' ? 'reportList' : 'monthReport', query: { - name: name + type: this.emoType } }); }, @@ -1420,6 +1453,7 @@ export default { display: flex; justify-content: space-around; align-items: center; + .periodItem { width: 48%; font-size: 28px; @@ -1428,16 +1462,19 @@ export default { padding: 12px; border-radius: 30px; background: #e6e6e6; + &.active { color: white; background: #179b3b; } } + .minPeriodItem { width: 32%; padding: 8px; } } + .periodSwitch { display: flex; width: 100%; @@ -1451,10 +1488,12 @@ export default { justify-self: center; color: gray; } + .arrow { font-size: 45px; } } + .bmi { display: flex; justify-content: flex-start; @@ -1467,6 +1506,7 @@ export default { padding: 0 5px; font-size: 28px; } + .van-button { padding: 5px 10px; margin-left: 50px; @@ -1476,6 +1516,7 @@ export default { background-color: $green; } } + .label { font-size: 36px; font-weight: bold; @@ -1483,27 +1524,38 @@ export default { display: flex; justify-content: space-between; align-items: center; + .right { font-size: 30px; } } + + .title-out { + font-size: 36px; + font-weight: bold; + padding: 60px 20px 20px 20px; + } + .echart-container { flex: 1; position: relative; min-height: 600px; background-color: #fff; - padding: 0 20px; + padding: 0 10px; } + .ChatBox { overflow: hidden; width: calc(100vw - 60px); height: 650px; border: 2px solid #cdf348; - border-radius: 70px; - margin-top: 30px; + border-radius: 30px; + /* margin-top: 30px; */ + h4 { padding: 40px 0 10px 60px; } + .legendBox { width: 100%; height: 100px; @@ -1529,10 +1581,12 @@ export default { margin-right: 0; } } + .not { .number { color: #179b3b; } + &::before { content: ''; position: absolute; @@ -1546,10 +1600,12 @@ export default { margin: auto; } } + .mild { .number { color: #2ea7e0; } + &::before { content: ''; position: absolute; @@ -1563,10 +1619,12 @@ export default { margin: auto; } } + .moderate { .number { color: #8dc21f; } + &::before { content: ''; position: absolute; @@ -1580,10 +1638,12 @@ export default { margin: auto; } } + .severe { .number { color: #ff5f8b; } + &::before { content: ''; position: absolute; @@ -1599,6 +1659,7 @@ export default { } } } + .minLegendBox { .legend { .legendItem { @@ -1608,16 +1669,19 @@ export default { &:nth-child(2n) { margin-right: 50px; } + &:last-child { margin-right: 0; } } } } + .Chat { width: calc(100vw - 60px); height: 500px; } + .result { height: 140px; padding: 0 30px; @@ -1626,18 +1690,24 @@ export default { justify-content: center; align-items: flex-start; flex-direction: column; + .wrapBox { - padding: 10px 180px 10px 60px; + padding: 10px 120px 10px 60px; width: 100%; background-color: #e6e6e6; - border-radius: 70px; + border-radius: 30px; } + .text { display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; + .right { + @include center(); + padding-left: px2rem(20); + img { height: 30px; width: 30px; @@ -1648,9 +1718,11 @@ export default { } } } + .minChartBox { height: 760px; } + .hiddenChart { width: 0; height: 0; @@ -1680,6 +1752,7 @@ export default { } } } + .minItem { width: calc((100vw - 60px) * 0.32); height: calc((100vw - 60px) * 0.32); diff --git a/src/views/insight/reportList.vue b/src/views/insight/reportList.vue new file mode 100644 index 0000000..6f9ba88 --- /dev/null +++ b/src/views/insight/reportList.vue @@ -0,0 +1,282 @@ + + + + + \ No newline at end of file diff --git a/src/views/today/index.vue b/src/views/today/index.vue index 8c9056b..4058481 100644 --- a/src/views/today/index.vue +++ b/src/views/today/index.vue @@ -3,16 +3,12 @@
-
+
{{ currentPerson.nickName @@ -21,23 +17,17 @@
-
-
+
+ } + ]">
@@ -53,12 +43,9 @@

暂无设备信息

--> -
+
- + @@ -170,12 +133,8 @@
    -
  • +

  • {{ item.value || '--' }}

    {{ item.name || '暂无数据' }}

    @@ -184,8 +143,7 @@

    - 温馨提示：检测数据仅供参考，不可做医疗诊断和治疗依据，在运动、工作等场景会影响健康检测。 + 温馨提示：检测数据仅供参考，不可做医疗诊断和治疗依据，在运动、工作等场景会影响健康检测。

@@ -255,7 +213,7 @@
- diff --git a/src/views/today/scss/report.scss b/src/views/today/scss/report.scss index 4f4f114..3d2e8a8 100644 --- a/src/views/today/scss/report.scss +++ b/src/views/today/scss/report.scss @@ -5,16 +5,40 @@ background-color: #f5f5f5; font-family: Source Han Sans CN; + .periodSwitch { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 40px; + padding-bottom: 10px; + padding-top: 100px; + left: 0; + + .timearea { + font-size: 28px; + justify-self: center; + color: gray; + } + + .arrow { + font-size: 45px; + } + } + .main { - height: calc(100vh - 200px); + height: calc(100vh - 150px); overflow: scroll; background-color: #fff; padding: 0 20px; - padding-top: 100px; + /* padding-top: 100px; */ + + + .periodNav { display: flex; justify-content: space-around; align-items: center; + .periodItem { width: 48%; font-size: 28px; @@ -23,16 +47,19 @@ padding: 12px; border-radius: 30px; background: #e6e6e6; + &.active { color: white; background: #179b3b; } } + .minPeriodItem { width: 32%; padding: 8px; } } + .line { height: 22px; background-color: $lineGray; @@ -41,6 +68,7 @@ .overall-rating { padding: 46px 15px; margin-bottom: 18px; + .con { padding: 34px 20px; display: flex; @@ -153,6 +181,7 @@ display: flex; justify-content: center; flex-direction: column; + .item { width: 100%; display: flex; @@ -160,6 +189,7 @@ align-items: center; font-size: 24px; padding: 18px 0; + .item-left { display: flex; justify-content: flex-start; @@ -184,13 +214,16 @@ .item-right { @include center(); + span { font-size: 24px; } } + .status { padding: 0 10px; @include center(); + img { height: 30px; width: 18px; @@ -205,6 +238,7 @@ .statistics { position: relative; padding: 10px 28px 10px 28px; + .list { flex: 1; width: 100%; @@ -224,6 +258,7 @@ border: 1px solid $border_color; border-radius: 30px; color: #fff; + .top { font-size: 24px; } @@ -238,25 +273,30 @@ } } } + .chart-title { padding: 30px; font-size: 36px; font-weight: bold; color: #282828; } + .bar-chart { position: relative; height: 600px; background-color: #fff; padding: 0 10px; + .echart { height: 600px; padding: 0 10px; } } + .scatter { border: none; height: 600px; + .custom-bot { .list { height: 40px; @@ -268,8 +308,10 @@ } } } + .advice { padding: 52px 20px 60px 20px; + .content { background: #f2f6ff; border-radius: 20px; @@ -281,6 +323,7 @@ color: #707070; line-height: 46px; } + .title { font-size: 26px; font-weight: bold; @@ -322,10 +365,12 @@ color: #fff; border: 1px solid #cdf348; border-radius: 40px; + p { font-size: 28px; padding: 0; @include center(); + .day { /* padding: 5px; */ font-size: 56px; @@ -335,6 +380,7 @@ font-size: 24px; padding: 0 10px; } + img { height: 30px; width: 18px; @@ -345,12 +391,14 @@ } } } + &.no-data { @include center(); flex-direction: column; + p { font-size: 32px; } } } -} +} \ No newline at end of file