@@ -0,0 +1,4 @@ | |||||
NODE_ENV='development' | |||||
# must start with VUE_APP_ | |||||
VUE_APP_ENV = 'development' | |||||
@@ -0,0 +1,4 @@ | |||||
NODE_ENV='production' | |||||
# must start with VUE_APP_ | |||||
VUE_APP_ENV = 'production' | |||||
@@ -0,0 +1,4 @@ | |||||
NODE_ENV='test' | |||||
# must start with VUE_APP_ | |||||
VUE_APP_ENV = 'test' | |||||
@@ -9,6 +9,7 @@ | |||||
@click-left="onClickLeft" | @click-left="onClickLeft" | ||||
@click-right="onClickRight" | @click-right="onClickRight" | ||||
> | > | ||||
<template #right><slot name="right"></slot> </template> | |||||
</van-nav-bar> | </van-nav-bar> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -49,7 +50,7 @@ export default { | |||||
} | } | ||||
}; | }; | ||||
</script> | </script> | ||||
<style scoped lang="scss"> | |||||
<style lang="scss"> | |||||
.nav-bar { | .nav-bar { | ||||
position: fixed !important; | position: fixed !important; | ||||
left: 0; | left: 0; | ||||
@@ -57,6 +58,16 @@ export default { | |||||
height: 100px; | height: 100px; | ||||
width: 100%; | width: 100%; | ||||
z-index: 999; | z-index: 999; | ||||
color: #333; | |||||
.van-nav-bar { | |||||
.van-nav-bar__content { | |||||
.van-nav-bar__right { | |||||
.van-nav-bar__text { | |||||
color: #333; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
/* @import url(); 引入css类 */ | /* @import url(); 引入css类 */ | ||||
@@ -180,7 +180,7 @@ export default { | |||||
padding-left: 20px; | padding-left: 20px; | ||||
display: grid; | display: grid; | ||||
grid-template-columns: repeat(4, auto); | grid-template-columns: repeat(4, auto); | ||||
grid-gap: 40px; | |||||
grid-gap: 20px; | |||||
.item { | .item { | ||||
position: relative; | position: relative; | ||||
/* height: 140px; */ | /* height: 140px; */ | ||||
@@ -202,7 +202,7 @@ export default { | |||||
.text { | .text { | ||||
@include flexbox(space-around, center, column, nowrap); | @include flexbox(space-around, center, column, nowrap); | ||||
padding: 5px 0; | padding: 5px 0; | ||||
font-size: 28px; | |||||
font-size: 24px; | |||||
font-weight: 400; | font-weight: 400; | ||||
} | } | ||||
} | } | ||||
@@ -75,7 +75,7 @@ | |||||
<p>体重:<span>60</span>kg</p> | <p>体重:<span>60</span>kg</p> | ||||
<p>BMI:<span>24.5</span></p> | <p>BMI:<span>24.5</span></p> | ||||
<p>{{ bmi.result }}</p> | <p>{{ bmi.result }}</p> | ||||
<van-button type="primary" size="mini">更新</van-button> | |||||
<van-button size="mini">更新</van-button> | |||||
</div> | </div> | ||||
<div class="ChatBox" :class="{ hiddenChart: signActive == 2 }"> | <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }"> | ||||
<div class="legendBox minLegendBox"> | <div class="legendBox minLegendBox"> | ||||
@@ -862,13 +862,14 @@ export default { | |||||
.van-button { | .van-button { | ||||
padding: 5px 10px; | padding: 5px 10px; | ||||
margin-left: 50px; | margin-left: 50px; | ||||
font-size: 14px; | |||||
color: #333; | |||||
font-size: 12px; | |||||
color: #fff; | |||||
border-radius: 30px; | border-radius: 30px; | ||||
background-color: $green; | |||||
} | } | ||||
} | } | ||||
.label { | .label { | ||||
font-size: 40px; | |||||
font-size: 36px; | |||||
font-weight: bold; | font-weight: bold; | ||||
padding: 30px 10px 30px 0; | padding: 30px 10px 30px 0; | ||||
display: flex; | display: flex; | ||||
@@ -1,7 +1,7 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div class="pageContent monthReport"> | <div class="pageContent monthReport"> | ||||
<NavBar title="月报" @on-click-left="onNavBack"></NavBar> | |||||
<NavBar title="月报" @on-click-left="onNavBack" right-text="历史"> </NavBar> | |||||
<div class="periodSwitch"> | <div class="periodSwitch"> | ||||
<div class="arrow arrowLeft"> | <div class="arrow arrowLeft"> | ||||
<van-icon name="arrow-left"></van-icon> | <van-icon name="arrow-left"></van-icon> | ||||
@@ -1,11 +1,6 @@ | |||||
<template> | <template> | ||||
<div class="psychological-container"> | <div class="psychological-container"> | ||||
<van-nav-bar title="情绪监测" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回"> | |||||
<template #left> | |||||
<van-icon name="arrow-left" size="24" style="padding: 0" /> | |||||
<span>返回</span> | |||||
</template> | |||||
</van-nav-bar> | |||||
<NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar> | |||||
<div class="tab-bar"> | <div class="tab-bar"> | ||||
<div class="date-tab-con"> | <div class="date-tab-con"> | ||||
<div class="date-tab-list"> | <div class="date-tab-list"> | ||||
@@ -29,9 +24,9 @@ | |||||
<!-- 标题 --> | <!-- 标题 --> | ||||
<div class="title"> | <div class="title"> | ||||
<div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp" /></div> | <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp" /></div> | ||||
<div class="title-right" v-show="currentDays === 0"> | |||||
<!-- <div class="title-right" v-show="currentDays === 0"> | |||||
<p @click="onHistory">历史监测</p> | <p @click="onHistory">历史监测</p> | ||||
</div> | |||||
</div> --> | |||||
</div> | </div> | ||||
<!-- 日历 --> | <!-- 日历 --> | ||||
@@ -99,13 +94,18 @@ | |||||
<div class="statistics"> | <div class="statistics"> | ||||
<div class="list"> | <div class="list"> | ||||
<div class="item" v-for="(item, index) in statisticsList" :key="index" :style="{ backgroundColor: '' }"> | |||||
<div | |||||
class="item" | |||||
v-for="(item, index) in statisticsList" | |||||
:key="index" | |||||
:style="{ backgroundColor: item.bgColor }" | |||||
> | |||||
<div class="top"> | <div class="top"> | ||||
<span>{{ item.label || '--' }}</span> | <span>{{ item.label || '--' }}</span> | ||||
</div> | </div> | ||||
<div class="middle"> | <div class="middle"> | ||||
<span :style="{ color: calcColor(item.value) }">{{ item.value || '--' }}</span> | |||||
<span>{{ item.value || '--' }}</span> | |||||
</div> | </div> | ||||
<div class="bottom"> | <div class="bottom"> | ||||
@@ -263,9 +263,13 @@ | |||||
<script> | <script> | ||||
import { EmotionModel, PsyBaseUrl } from '@/config/models'; | import { EmotionModel, PsyBaseUrl } from '@/config/models'; | ||||
import NavBar from '@/components/NavBar'; | |||||
import axios from 'axios'; | import axios from 'axios'; | ||||
export default { | export default { | ||||
name: 'psychological-monitor', | name: 'psychological-monitor', | ||||
components: { | |||||
NavBar | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
// 日期选择标签 | // 日期选择标签 | ||||
@@ -920,7 +924,8 @@ export default { | |||||
? this.currentDays === 0 | ? this.currentDays === 0 | ||||
? this.$dayjs(data.MaxDesc).format('HH:mm') | ? this.$dayjs(data.MaxDesc).format('HH:mm') | ||||
: this.$dayjs(data.MaxDesc).format('MM/DD HH:mm') | : this.$dayjs(data.MaxDesc).format('MM/DD HH:mm') | ||||
: '' | |||||
: '', | |||||
bgColor: '#ff5f8b' | |||||
}; | }; | ||||
let Min = { | let Min = { | ||||
label: '最小值', | label: '最小值', | ||||
@@ -929,9 +934,10 @@ export default { | |||||
? this.currentDays === 0 | ? this.currentDays === 0 | ||||
? this.$dayjs(data.MinDesc).format('HH:mm') | ? this.$dayjs(data.MinDesc).format('HH:mm') | ||||
: this.$dayjs(data.MinDesc).format('MM/DD HH:mm') | : this.$dayjs(data.MinDesc).format('MM/DD HH:mm') | ||||
: '' | |||||
: '', | |||||
bgColor: '#189b3b' | |||||
}; | }; | ||||
let Avg = { | |||||
/* let Avg = { | |||||
label: '平均值', | label: '平均值', | ||||
value: data.Avg, | value: data.Avg, | ||||
time: data.AvgDesc | time: data.AvgDesc | ||||
@@ -939,7 +945,7 @@ export default { | |||||
? this.$dayjs(data.AvgDesc).format('HH:mm') | ? this.$dayjs(data.AvgDesc).format('HH:mm') | ||||
: this.$dayjs(data.AvgDesc).format('MM/DD HH:mm') | : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm') | ||||
: '' | : '' | ||||
}; | |||||
}; */ | |||||
let Current = { | let Current = { | ||||
label: '最近值', | label: '最近值', | ||||
value: data.Current, | value: data.Current, | ||||
@@ -947,11 +953,12 @@ export default { | |||||
? this.currentDays === 0 | ? this.currentDays === 0 | ||||
? this.$dayjs(data.CurrentDesc).format('HH:mm') | ? this.$dayjs(data.CurrentDesc).format('HH:mm') | ||||
: this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm') | : this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm') | ||||
: '' | |||||
: '', | |||||
bgColor: '#2ea7e0' | |||||
}; | }; | ||||
this.statisticsList.push(Max); | this.statisticsList.push(Max); | ||||
this.statisticsList.push(Min); | this.statisticsList.push(Min); | ||||
this.statisticsList.push(Avg); | |||||
/* this.statisticsList.push(Avg); */ | |||||
this.statisticsList.push(Current); | this.statisticsList.push(Current); | ||||
// 周报月报底部显示数据 | // 周报月报底部显示数据 | ||||
let NoneDay = { | let NoneDay = { | ||||
@@ -106,7 +106,7 @@ | |||||
font-weight: bold; | font-weight: bold; | ||||
@include center(); | @include center(); | ||||
&.active { | &.active { | ||||
color: #333; | |||||
color: #fff; | |||||
background-color: $green; | background-color: $green; | ||||
} | } | ||||
} | } | ||||
@@ -201,37 +201,38 @@ | |||||
} | } | ||||
} | } | ||||
.statistics { | .statistics { | ||||
position: relative; | |||||
padding: 0px 20px 10px 20px; | |||||
height: 100%; | |||||
padding: 10px 40px; | |||||
.list { | .list { | ||||
flex: 1; | |||||
width: 100%; | |||||
display: grid; | |||||
grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布 | |||||
/* grid-template-rows: repeat(3, 1fr); */ | |||||
gap: 40px; | |||||
font-size: 32px; | |||||
.item { | |||||
display: flex; | display: flex; | ||||
justify-content: space-around; | |||||
align-items: center; | |||||
font-size: 32px; | |||||
.item { | |||||
@include center(); | |||||
width: 126px; | |||||
padding: 20px; | |||||
/* height: px2rem(136); */ | |||||
flex-direction: column; | |||||
/* border: 1px solid $border_color; | |||||
border-radius: 30px; */ | |||||
.top { | |||||
font-size: 24px; | |||||
} | |||||
.middle { | |||||
font-size: 48px; | |||||
font-weight: bold; | |||||
padding: 10px; | |||||
} | |||||
.bottom { | |||||
font-size: 18px | |||||
} | |||||
justify-content: flex-start; | |||||
align-items: flex-start; | |||||
padding: 30px; | |||||
/* height: px2rem(136); */ | |||||
flex-direction: column; | |||||
border: 1px solid $border_color; | |||||
border-radius: 30px; | |||||
color: #fff; | |||||
.top { | |||||
font-size: 24px; | |||||
} | |||||
.middle { | |||||
font-size: 48px; | |||||
} | } | ||||
.bottom { | |||||
font-size: 18px; | |||||
} | |||||
} | |||||
} | } | ||||
} | |||||
} | |||||
} | } | ||||
.line { | .line { | ||||
position: relative; | position: relative; | ||||
@@ -228,7 +228,7 @@ | |||||
border-bottom: 8px solid $green; | border-bottom: 8px solid $green; | ||||
} */ | } */ | ||||
&.active { | &.active { | ||||
color: #333; | |||||
color: #fff; | |||||
background-color: $green; | background-color: $green; | ||||
} | } | ||||
&.notClick { | &.notClick { | ||||
@@ -1,8 +1,7 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div class="signs"> | <div class="signs"> | ||||
<van-nav-bar title="心率监测" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回"> | |||||
</van-nav-bar> | |||||
<NavBar title="心率监测" @on-click-left="onNavBack" right-text="历史"> </NavBar> | |||||
<div class="main"> | <div class="main"> | ||||
<div class="date"> | <div class="date"> | ||||
<div class="left"> | <div class="left"> | ||||
@@ -128,7 +127,11 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import NavBar from '@/components/NavBar'; | |||||
export default { | export default { | ||||
components: { | |||||
NavBar | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
currentRateOut: 100, | currentRateOut: 100, | ||||
@@ -18,6 +18,7 @@ module.exports = defineConfig({ | |||||
devServer: { | devServer: { | ||||
port: 9093, // 端口 | port: 9093, // 端口 | ||||
open: false, // 启动后打开浏览器 | open: false, // 启动后打开浏览器 | ||||
hot: true, //热更新 | |||||
client: { | client: { | ||||
overlay: { | overlay: { | ||||
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 | // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层 | ||||