chenJinxu
/
HealthStudentWeb
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

Merge branch 'feat' into test

test
chenJinxu пре 9 месеци
родитељ
cf0289f56c 51846e022a
комит
d16e9619b3
9 измењених фајлова са 732 додато и 327 уклоњено
Подељен поглед
Diff Options
Show Stats Download Patch File Download Diff File
  1. +18
    -12
      src/components/EchartBox.vue
  2. +6
    -2
      src/components/TopNavBar.vue
  3. +6
    -0
      src/router/router.config.js
  4. +10
    -1
      src/store/index.js
  5. +131
    -58
      src/views/insight/index.vue
  6. +282
    -0
      src/views/insight/reportList.vue
  7. +40
    -78
      src/views/today/index.vue
  8. +188
    -173
      src/views/today/report.vue
  9. +51
    -3
      src/views/today/scss/report.scss

+ 18
- 12
src/components/EchartBox.vue Прегледај датотеку

@@ -15,13 +15,10 @@
<div class="right">
<div class="list">
<div class="item" v-for="(item, index) in legend.list" :key="index">
<div
class="shape"
:style="{
backgroundColor: item.color,
borderRadius: '50%'
}"
></div>
<div class="shape" :style="{
backgroundColor: item.color,
borderRadius: '50%'
}"></div>
<div class="text">
<span>{{ item.name }}</span>
</div>
@@ -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%;
}
}
}
}
</style>
}</style>

+ 6
- 2
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;


+ 6
- 0
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 }
}
]
}


+ 10
- 1
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: {},


+ 131
- 58
src/views/insight/index.vue Прегледај датотеку

@@ -22,26 +22,15 @@
</div>
</div>
<div class="periodNav">
<div
class="periodItem minPeriodItem"
:class="{ active: emotionActive == index }"
v-for="(item, index) in psyList"
:key="index"
@click="onEmotionClick(item, index)"
>
<div class="periodItem minPeriodItem" :class="{ active: emotionActive == index }" v-for="(item, index) in psyList"
:key="index" @click="onEmotionClick(item, index)">
<span>{{ item.name }}</span>
</div>
</div>
<div class="echart-container">
<div class="echart">
<EchartBox
echartId="emotionChart"
:outTitle="emoLegend.outTitle"
height="200"
width="200"
:legend="emoLegend"
:options="defaultOptions"
></EchartBox>
<EchartBox echartId="emotionChart" :outTitle="emoLegend.outTitle" height="200" width="200" :legend="emoLegend"
:options="defaultOptions"></EchartBox>
</div>
</div>
<div class="grid">
@@ -61,23 +50,21 @@
</div>

<div class="periodNav">
<div
class="periodItem minPeriodItem"
:class="{ active: signActive == index }"
v-for="(item, index) in signList"
:key="index"
@click="onSignClick(index)"
>
<div class="periodItem minPeriodItem" :class="{ active: signActive == index }" v-for="(item, index) in signList"
:key="index" @click="onSignClick(index)">
<span>{{ item.name }}</span>
</div>
</div>
<!-- bmi显示/输入 -->
<div class="bmi" v-show="signActive == 2">
<!-- bmi显示/输入 TODO待接口-->
<!-- <div class="bmi" v-show="signActive == 2">
<p>身高:<span>170</span>cm</p>
<p>体重:<span>60</span>kg</p>
<p>BMI:<span>24.5</span></p>
<p>{{ bmi.result }}</p>
<van-button size="mini">更新</van-button>
</div> -->
<div class="title-out">
<span>{{ signsChartTitle }}</span>
</div>
<div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
<div class="legendBox minLegendBox">
@@ -87,16 +74,12 @@
</div>
</div>
</div>

<div class="Chat signChart" id="signChart"></div>
</div>
<div class="grid">
<div
class="gridItem"
v-show="signActive != 2"
:style="`background:${item.color};`"
v-for="(item, index) in signDaysList"
:key="index"
>
<div class="gridItem" v-show="signActive != 2" :style="`background:${item.color};`"
v-for="(item, index) in signDaysList" :key="index">
<div class="time">
<span class="number">{{ item.day }}</span>
<span>天</span>
@@ -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);


+ 282
- 0
src/views/insight/reportList.vue Прегледај датотеку

@@ -0,0 +1,282 @@
<!-- -->
<template>
<div class="report-con">
<van-nav-bar title="周报列表" @click-left="onNavBack" left-text="返回" left-arrow>
</van-nav-bar>
<div class="main">
<div class="report">
<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="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>
</div>
</div>
</template>

<script>
import axios from 'axios';
import ToastService from '@/services/toast-service';
export default {
data() {
return {
weekImg: require('@/assets/today/icons/week_report.png'),
moreImg: require('@/assets/today/icons/more.png'),
noDataImg: require('@/assets/today/images/no_data_01.png'),
weekList: []
}
},
computed: {
uid() {
return this.$store.getters.uid
}
},
created() {

},
mounted() {
this.$nextTick(() => {
this.getWeekResult();
})
},
methods: {
getWeekResult() {
ToastService.loading({
message: '数据加载中'
});
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,
type: this.$route.query.type
};
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
};
})
.reverse();
ToastService.success({
message: '数据加载完成'
});
});
},
onNavBack() {
this.$router.push({
name: 'Insight'
})
},
onClickItem(recordId) {
this.$router.push({
name: 'report',
query: {
recordId: recordId,
name: this.currentEmoName,
isShowLeft: true,
uid: this.uid,
type: this.$route.query.type
}
});
},
// 计算结果采用哪种颜色
calcResultColor(value, isCallBackClass) {
let color = '';
let className = '';
switch (Number(value)) {
case 0:
color = '#179b3b';
className = 'none';
break;
case 1:
color = '#8dc21f';
className = 'mid';
break;
case 2:
color = '#2ea7e0';
className = 'severe';
break;
case 3:
color = '#ff5f8b';
className = 'severe';
break;
}
return isCallBackClass ? className : color;
},
},
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.report-con {
height: 100vh;
overflow: hidden;

.main {
position: relative;
height: calc(100vh - 100px);
overflow: scroll;

.report {
position: relative;
height: 100%;
overflow: scroll;
background-color: #f5f5f5;

.content {
position: relative;

.list {
position: relative;

.item {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 68px 30px;
background-color: #fff;
margin-bottom: 22px;

.left {
display: flex;
justify-content: flex-start;
align-items: flex-start;

img {
height: 50px;
width: 50px;
}

.middle {

.title,
.overall,
.trend {
display: flex;
justify-content: flex-start;
align-items: center;

padding-left: 26px;

span,
p {
font-size: 36px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8d8d8d;
line-height: 60px;
}
}

.title {
span {
padding-right: 40px;
}

p {
color: #282828;
}
}

.overall {
display: flex;
justify-content: space-between;
align-items: center;

.left {
p {
padding-left: 40px;
font-weight: bold;
}
}

.right {
img {
height: 30px;
width: 18px;
}
}
}

.trend {
align-items: flex-start;
text-align: left;
}
}
}

.right {
img {
width: 18px;
height: 30px;
}
}
}

&.no-data {
height: calc(100vh - 200px);
width: 100%;
@include center();
flex-direction: column;

img {
height: 220px;
width: 350px;
}

p {
color: #999;
font-size: 32px;
padding: 40px 0 130px 0;
}
}
}
}
}
}
}
</style>

+ 40
- 78
src/views/today/index.vue Прегледај датотеку

@@ -3,16 +3,12 @@
<div class="today">
<div class="devicesSwitch" v-if="false">
<!-- <i :class="[{on: isClear},'news']" @click="newsClick" v-show="true"></i> -->
<div
:class="[
'imgArea',
{
cut: currentPerson.deviceStatus ? currentPerson.deviceStatus.online != 0 : false
}
]"
@click="imgAreaClick"
v-show="personList !== null && personList.length"
>
<div :class="[
'imgArea',
{
cut: currentPerson.deviceStatus ? currentPerson.deviceStatus.online != 0 : false
}
]" @click="imgAreaClick" v-show="personList !== null && personList.length">
<img :src="currentPerson.avatar" />
<span style="font-weight: bolder" v-show="currentPerson && currentPerson.nickName">{{
currentPerson.nickName
@@ -21,23 +17,17 @@
</div>
<!-- 点击宝贝切换出现 -->
<div :class="[{ active: conAreaShow }, 'conArea']" v-if="personList !== null">
<div
class="list"
v-for="(item, index) in personList"
:key="`list_index_${index}`"
@click="imageListClick(item, index)"
>
<div
:class="[
{ active: item.id == $store.getters.personId },
'imgA',
{
online: {
online: item.deviceStatus ? item.deviceStatus.online && item.deviceStatus.online == 1 : 'false'
}
<div class="list" v-for="(item, index) in personList" :key="`list_index_${index}`"
@click="imageListClick(item, index)">
<div :class="[
{ active: item.id == $store.getters.personId },
'imgA',
{
online: {
online: item.deviceStatus ? item.deviceStatus.online && item.deviceStatus.online == 1 : 'false'
}
]"
>
}
]">
<img :src="item.avatar" />
</div>
<div :class="['Myname', { active: item.id == $store.getters.personId }]">
@@ -53,12 +43,9 @@
<p>暂无设备信息</p>
</div> -->
<!-- 今日状态 -->
<div
@click="conAreaShow = false"
:style="{
paddingBottom: isShowBind ? '40px' : 0
}"
>
<div @click="conAreaShow = false" :style="{
paddingBottom: isShowBind ? '40px' : 0
}">
<div class="today-status">
<img class="img" :src="calcTodayStatus(todayLevel, 'img')" />
<!-- <img
@@ -69,11 +56,8 @@
<div class="status">
<p>状态{{ calcTodayStatus(todayLevel, 'text') }}</p>
<ul>
<li
v-for="(item, index) in statusList"
:key="index"
:class="[item.className, { active: item.active }]"
></li>
<li v-for="(item, index) in statusList" :key="index" :class="[item.className, { active: item.active }]">
</li>
<!-- <li :class="['toobad', { active: false }]"></li>
<li :class="['ordinary', { active: todayStatus }]"></li>
<li :class="['sameas', { active: false }]"></li>
@@ -118,12 +102,8 @@
</div>
</div>
<ul>
<li
v-for="(item, index) in psyDataList.length > 0 ? psyDataList : 3"
:key="index"
:style="{ backgroundColor: item.bgColor }"
@click="onRouterTo('emotionDetails', item.class)"
>
<li v-for="(item, index) in psyDataList.length > 0 ? psyDataList : 3" :key="index"
:style="{ backgroundColor: item.bgColor }" @click="onRouterTo('emotionDetails', item.class)">
<h4>{{ item.value || '--' }}</h4>
<p>{{ item.name || '--' }}</p>
<span>{{ item.result || '暂无数据' }}</span>
@@ -133,30 +113,13 @@
</div>
<!-- 日历 -->

<van-dialog
class="calenddar-dialog"
v-model="calendarDialogShow"
:show-confirm-button="false"
:show-cancle-button="false"
:close-on-click-overlay="true"
ref="calenddarDialog"
>
<van-dialog class="calenddar-dialog" v-model="calendarDialogShow" :show-confirm-button="false"
:show-cancle-button="false" :close-on-click-overlay="true" ref="calenddarDialog">
<template #default>
<div class="calendar" ref="calendarCon">
<van-calendar
v-model="calendarDialogShow"
:min-date="minDate"
:max-date="maxDate"
:default-date="defaultDate"
:round="false"
:poppable="false"
color="#179b3b"
:show-confirm="false"
:show-title="true"
:show-subtitle="false"
:formatter="formatterDay"
@select="onSelect"
/>
<van-calendar v-model="calendarDialogShow" :min-date="minDate" :max-date="maxDate"
:default-date="defaultDate" :round="false" :poppable="false" color="#179b3b" :show-confirm="false"
:show-title="true" :show-subtitle="false" :formatter="formatterDay" @select="onSelect" />
</div>
</template>
</van-dialog>
@@ -170,12 +133,8 @@
</div>
</div>
<ul>
<li
v-for="(item, index) in signDataList.length > 0 ? signDataList : 3"
:key="index"
:style="{ backgroundColor: item.bgColor }"
@click="onRouterTo('signsDetails', item.class)"
>
<li v-for="(item, index) in signDataList.length > 0 ? signDataList : 3" :key="index"
:style="{ backgroundColor: item.bgColor }" @click="onRouterTo('signsDetails', item.class)">
<h4>{{ item.value || '--' }}</h4>
<p>{{ item.name || '暂无数据' }}</p>
<time>{{ item.time || '--' }}</time>
@@ -184,8 +143,7 @@
<div class="tip">
<img class="img" src="@/assets/today/icons/2_25.png" />
<p>
<span>温馨提示：</span
>检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。
<span>温馨提示：</span>检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。
</p>
</div>
</div>
@@ -255,7 +213,7 @@
</div>
</template>
<script>
<script>
import APIAlarm from '@/api/core';
import APIPsy from '@/api/psychological';
import APIHealthUser from '@/api/health-user';
@@ -360,10 +318,14 @@ export default {
return this.$route.query.isBinding || false;
}
},
created() {},
async mounted() {
this.getPersonList();
this.getAuth();
created() {
this.$nextTick(() => {
this.getPersonList();
this.getAuth();
})
},
mounted() {

},
methods: {
getPersonList() {


+ 188
- 173
src/views/today/report.vue Прегледај датотеку

@@ -2,20 +2,24 @@
<!-- 周/月报 -->
<div class="report">
<NavBar title="周报" @on-click-left="onNavBack" right-text="历史"> </NavBar>

<div class="periodSwitch">
<div class="arrow arrowLeft">
<van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon>
</div>
<div class="timearea">{{ currentRecord.name }}</div>
<div class="arrow arrowRight">
<van-icon name="arrow" :color="isAddClick ? '' : '#e6e6e6'" @click="dateClick('add')"></van-icon>
</div>
</div>
<div class="main">
<div class="periodNav">
<div
class="periodItem minPeriodItem"
:class="{ active: signActive == index }"
v-for="(item, index) in signList"
:key="index"
@click="onSignClick(index)"
>
<!-- <div class="periodNav">
<div class="periodItem minPeriodItem" :class="{ active: signActive == index }" v-for="(item, index) in signList"
:key="index" @click="onSignClick(index)">
<span>{{ item.name }}</span>
</div>
</div>
</div> -->
<!-- 总评 -->

<div class="overall-rating">
<div class="con">
<p class="space-between">
@@ -62,8 +66,8 @@
<img :src="calcImg(item.percentage, item.lastPercentage)" alt="" />
<span :style="{ color: calcImg(item.percentage, item.lastPercentage, true) != 0 ? item.color : '' }">{{
calcImg(item.percentage, item.lastPercentage, true)
? Math.abs(calcImg(item.percentage, item.lastPercentage, true)) + '%'
: '持平'
? Math.abs(calcImg(item.percentage, item.lastPercentage, true)) + '%'
: '持平'
}}</span>
</div>
</div>
@@ -72,12 +76,8 @@
</div>
<div class="statistics">
<div class="list">
<div
class="item"
v-for="(item, index) in statisticsList"
:key="index"
:style="{ backgroundColor: item.bgColor }"
>
<div class="item" v-for="(item, index) in statisticsList" :key="index"
:style="{ backgroundColor: item.bgColor }">
<div class="top">
<span>{{ item.label || '--' }}</span>
</div>
@@ -97,15 +97,9 @@
<!-- <div class="chart-title">
<p>24小时{{ emoName }}时间分布图</p>
</div> -->
<div class="scatter">
<EchartBox
echartId="scatterCharts"
outTitle="24小时抑郁时间分布图"
:border="false"
height="200"
width="200"
:options="scatterOptions"
>
<div class="scatter" v-show="false">
<EchartBox echartId="scatterCharts" outTitle="24小时抑郁时间分布图" :border="false" height="200" width="200"
:options="scatterOptions">
<template #custom-bot>
<div class="custom-bot">
<div class="list">
@@ -124,7 +118,7 @@
<!-- 数据图-柱形图 -->
<div class="bar-chart">
<div class="echart">
<EchartBox echartId="charts" height="200" width="200" :legend="emoLegend" :options="emoOptions"></EchartBox>
<EchartBox echartId="charts" height="200" width="200" :legend="emoLegend" :options="defaultOptions"></EchartBox>
</div>
</div>
<div class="line"></div>
@@ -132,13 +126,7 @@
<div class="advice">
<div class="content">
<p class="title">健康建议</p>
<!-- <p>{{ weekResult.Advice || '--' }}</p> -->
<p>
健康建议抑郁是一种负性情绪，是人们遇到具体生活事件后，出现
的一种不愉快、烦闷压抑的内心体验。情绪受挫折的影响是很正常
的反应，不要任由情绪跟着负面想法走，让自己陷入抑郁之中。与
人沟通，有助于排解不良情绪；把注意力放到当下真正需要关注的 事情中来，积极应对困难，有助于改善现状。
</p>
<p>{{ weekResult.Advice || '--' }}</p>
</div>
</div>
<!-- 概览 -->
@@ -147,12 +135,8 @@
<div class="title">
<span class="title-text">{{ surveyTitle }}</span>
<div class="mood-list">
<div
class="item"
v-for="(item, index) in emotionList"
:key="index"
:style="{ backgroundColor: item.color }"
>
<div class="item" v-for="(item, index) in emotionList" :key="index"
:style="{ backgroundColor: item.color }">
<p>
<span class="day">{{ item.days }}</span>
<span class="day-text">天</span>
@@ -310,16 +294,28 @@ export default {
signGrid: [],
chartsScatter: null,
timeList: ['0', '6', '12', '18', '24'],
emotionDataNew: []
emotionDataNew: [],
count: 0,
isPreClick: true,
isAddClick: true,
clickFlag: true, //左右日期按钮是否给予点击
weekList: [],
currentRecord: {},
maxCount: ''
};
},
created() {
this.initEchartText();
this.createList();
this.loadParams();
//this.createList();
},
mounted() {
this.loadParams();
this.initEchart();
this.$nextTick(() => {
this.initEchart();
this.getWeekResult();
})


},
watch: {
// 监听数据发生变化 初始化各项图表
@@ -343,6 +339,9 @@ export default {
}
},
computed: {
uid() {
return this.$store.getters.uid
},
emoOptions() {
return {
grid: {
@@ -405,86 +404,13 @@ export default {
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: '#8dc21f'
},
textStyle: {
fontSize: 12
}
},
{
name: `中度${this.emoName}倾向`,
itemStyle: {
color: '#2ea7e0'
},
icon: 'rect',
textStyle: {
fontSize: 12
}
},
{
name: `重度${this.emoName}倾向`,
itemStyle: {
color: '#ff5f8b'
},
icon: 'rect',
textStyle: {
fontSize: 12
}
},
{
name: `无${this.emoName}倾向`,
icon: 'rect',
itemStyle: {
color: '#179b3b'
},
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%',
borderWidth: 0,
top: '3%',
left: '1%',
right: '5%',
bottom: '5%',
right: '3%',
bottom: '15%',
containLabel: true
},
xAxis: {
@@ -515,11 +441,11 @@ export default {
data: this.xAxisData
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
/* {
type: "inside",
start: 0,
end: 100,
}, */
{
start: 0,
end: 100,
@@ -527,9 +453,9 @@ export default {
color: '#FFF',
fontSize: 14
},
show: false,
height: 25,
bottom: '3%',
show: true,
height: 20,
bottom: 4,
handleStyle: {
borderWidth: 1,
borderCap: 'square'
@@ -543,7 +469,7 @@ export default {
align: 'center'
},
formatter: function (params) {
return params[0].marker + params[0].name + '--' + params[0].value + '</br>';
return params[0].marker + params[0].name + '</br>' + params[0].value;
}
},
yAxis: {
@@ -556,16 +482,16 @@ export default {
nameTextStyle: {
fontSize: 13
},
alignTicks: true,
alignTicks: false,
axisTick: {
show: true
show: false
},
axisLabel: {
show: true,
fontSize: 13
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: '#ddd',
width: 1
@@ -577,9 +503,19 @@ export default {
name: `无${this.emoName}倾向`,
type: 'line',
padding: 5,
smooth: true,
data: this.emotionData,
symbol: 'circle',
symbolSize: 8
symbolSize: 10,
itemStyle: {
color: '#fff',
borderWidth: 2
},
lineStyle: {
width: 6,
type: 'solid',
color: '#189b3b'
}
},
{
name: `轻度${this.emoName}倾向`,
@@ -881,13 +817,13 @@ export default {
}
return title;
},
getWeekResultDetail() {
getWeekResultDetail(recordId) {
this.$toast.loading('数据加载中');
let baseUrl =
process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
let reqUrl = `${baseUrl}/api/Data/GetWeekResultDetail`;
let reqParams = {
recordId: /* this.params.recordId */ '1728096156447281486'
recordId: recordId || this.params.recordId
};
axios
.get(reqUrl, {
@@ -898,8 +834,8 @@ export default {
const data = res.data.response;
let chartData = data.ChartData
? JSON.parse(data.ChartData).filter(item => {
return item.Key;
})
return item.Key;
})
: [];
if (data) {
this.monitoringCount = data.Total;
@@ -1051,7 +987,7 @@ export default {
{
name: '平均值',
type: 'scatter',
symbolSize: 8,
symbolSize: 14,
data: this.emotionData
},
{
@@ -1059,15 +995,15 @@ export default {
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(
let categoryIndex = api.value(0);
let end = api.coord([categoryIndex, api.value(1)]);
let start = api.coord([categoryIndex, api.value(2)]);
let width = 16;
let rectShape = that.$echarts.graphic.clipRectByRect(
{
x: start[0] - width / 2,
y: start[1],
width: 8,
width: 16,
height: end[1] - start[1]
},
{
@@ -1099,25 +1035,25 @@ export default {
{
name: `轻度${this.emoName}倾向`,
type: 'scatter',
symbolSize: 8,
symbolSize: 12,
data: ''
},
{
name: `中度${this.emoName}倾向`,
type: 'scatter',
symbolSize: 8,
symbolSize: 12,
data: ''
},
{
name: `重度${this.emoName}倾向`,
type: 'scatter',
symbolSize: 8,
symbolSize: 12,
data: ''
},
{
name: `无${this.emoName}倾向`,
type: 'scatter',
symbolSize: 8,
symbolSize: 12,
data: ''
}
];
@@ -1125,27 +1061,25 @@ export default {
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]
);
}
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;
@@ -1174,7 +1108,10 @@ export default {
},
onNavBack() {
this.$router.push({
name: 'Insight'
name: 'reportList',
query: {
type: this.$route.query.type
}
});
},
// 计算字体显示的颜色
@@ -1236,7 +1173,85 @@ export default {
},
onSignClick(index) {
this.signActive = index;
}
},
dateClick(type) {
if (type == 'add') {
if (this.count <= 0) {
return;
}
this.count--;
this.isPreClick = true;
let recordId = this.weekList.filter(item => {
return item.count === this.count;
})[0].recordId;
this.currentRecord = this.weekList.filter(item => {
return item.count === this.count;
})[0]
this.getWeekResultDetail(recordId);
if (this.count <= 0) {
this.isAddClick = false;
}
console.log("右，当前的count", this.count);
} else {
// 上一个
if (this.count >= this.maxCount) {
return;
}
this.count++;
this.isAddClick = true;
let recordId = this.weekList.filter(item => {
return item.count === this.count;
})[0].recordId;
this.currentRecord = this.weekList.filter(item => {
return item.count === this.count;
})[0]
this.getWeekResultDetail(recordId);
console.log("recordId", recordId);
if (this.count >= this.maxCount) {
this.isPreClick = false;
}
console.log("左，当前的count", this.count);
}
},
getWeekResult() {
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,
type: this.$route.query.type
};
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.reverse()
.map((item, index) => {
return {
name: item.Name.replace('周报', '').replace(/-/g, '.').replace(/~/g, '-'),
recordId: item.RecordId,
summary: item.Summary,
summaryLevel: item.SummaryLevel,
count: index
};
})

this.currentRecord = this.weekList.filter(item => {
return item.recordId == this.$route.query.recordId
})[0];
this.count = this.weekList.filter(item => {
return item.recordId == this.$route.query.recordId
})[0].count;
this.maxCount = data.length - 1;
this.isAddClick = this.maxCount - this.count < this.maxCount;
this.isPreClick = this.maxCount - this.count > 0;
console.log("weekList", this.weekList, this.count);
});
},
}
};
</script>


+ 51
- 3
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;
}
}
}
}
}

Write Preview
Loading…
Откажи
Сачувај