|
|
@@ -0,0 +1,421 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%" id="charsPanel" >
|
|
|
+ <el-header>
|
|
|
+ <el-row>
|
|
|
+ <el-form>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="this.$t('sleepData.ChooseDate')" >
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ :editable="false"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ v-model="chooseDate"
|
|
|
+ :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() }}"
|
|
|
+ @change="chooseDateChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-row>
|
|
|
+ <el-col :offset="2" :span="2">
|
|
|
+ <h2>{{chooseDate| WeekFilter}}</h2>
|
|
|
+ <h4>{{chooseDate | DayFilter}}</h4>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" v-show="sleepDataJson!==null">
|
|
|
+ <div class="" id="gaugeChart" :style="{height:'200px', width:dialogWidth/4+'px'}"> </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" v-if="sleepDataJson!==null">
|
|
|
+ <div class="sleep_datashow_item" style="margin-top:30px">
|
|
|
+ <h2>{{Math.floor(sleepDataJson.inBedDuration/60)+this.$t('sleepData.Hour')+Math.floor(sleepDataJson.inBedDuration%60)+this.$t('sleepData.Minute') }}</h2>
|
|
|
+ <p>{{this.$t('sleepData.InBed')}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{Math.floor(sleepDataJson.sleepDuration/60)+this.$t('sleepData.Hour')+Math.floor(sleepDataJson.sleepDuration%60)+this.$t('sleepData.Minute') }}</h2>
|
|
|
+ <p>{{this.$t('sleepData.Asleep')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" v-show="sleepDataJson!==null">
|
|
|
+ <div id="pieChart" :style="{height:'200px', width:dialogWidth/3+'px'}"></div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div v-show="sleepDataJson!==null"
|
|
|
+ id="chartSleep"
|
|
|
+ :style="{height:'200px', width:dialogWidth+'px'}"
|
|
|
+ />
|
|
|
+ <el-row v-if="sleepDataJson!==null">
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.getInBedTime | HmFilter}}</h2>
|
|
|
+ <p>{{this.$t('sleepData.GetInBedTime')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.awakeTime | HmFilter}}</h2>
|
|
|
+ <p>{{this.$t('sleepData.AwakeTime')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.avarageBreath}}<span>{{this.$t('sleepData.Times')}}/{{this.$t('sleepData.Minute')}}</span></h2>
|
|
|
+ <p>{{this.$t('sleepData.AvarageBreath')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.avarageHeartRate}}<span>{{this.$t('sleepData.Times')}}/{{this.$t('sleepData.Minute')}}</span></h2>
|
|
|
+ <p>{{this.$t('sleepData.AvarageHeartBeat')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.leaveBedTimes}}<span>{{this.$t('sleepData.Times')}}</span></h2>
|
|
|
+ <p>{{this.$t('sleepData.LeaveBedTimes')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.sleepScore}}</h2>
|
|
|
+ <p>{{this.$t('sleepData.Quality')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{Math.floor(sleepDataJson.sleepDuration/60)+this.$t('sleepData.Hour')+Math.floor(sleepDataJson.sleepDuration%60)+this.$t('sleepData.Minute') }}</h2>
|
|
|
+ <p>{{this.$t('sleepData.Asleep')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.turnOverTimes}}<span>{{this.$t('sleepData.Times')}}</span></h2>
|
|
|
+ <p>{{this.$t('sleepData.TurnOverTimes')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="2">
|
|
|
+ <div class="sleep_datashow_item">
|
|
|
+ <h2>{{sleepDataJson.breathStopTimes}}<span>{{this.$t('sleepData.Times')}}</span></h2>
|
|
|
+ <p>{{this.$t('sleepData.BreathPauseTimes')}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-empty :description="this.$t('sleepData.NoData')" v-if="sleepDataJson===null"></el-empty>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import * as API_SleepData from "@/api/ncs_sleep_data";
|
|
|
+ import moment from 'moment'
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "sleep-detect-data",
|
|
|
+ props: {
|
|
|
+ memberId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ HmFilter(value){
|
|
|
+ if(value===null){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return moment(value).format('HH:mm')
|
|
|
+ },
|
|
|
+ DayFilter(value){
|
|
|
+ if(value===null){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return moment(value).format('YYYY-MM-DD')
|
|
|
+ },
|
|
|
+ WeekFilter(value){
|
|
|
+ if(value===null){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return moment(value).format('dddd')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ memberId: function() {
|
|
|
+ if (this.memberId) {
|
|
|
+ let dateStr = moment(this.chooseDate).format('YYYY-MM-DD')
|
|
|
+ this.getSleepData(this.memberId,dateStr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ const _this=this
|
|
|
+ return{
|
|
|
+ sleepChart:null,
|
|
|
+ pieChart:null,
|
|
|
+ gaugeChart:null,
|
|
|
+ weekDay:'',
|
|
|
+ chooseDate:new Date(),
|
|
|
+ sleepDataJson:{},
|
|
|
+ option:{
|
|
|
+ grid:{
|
|
|
+ right:100,
|
|
|
+ top:20,
|
|
|
+ left:100,
|
|
|
+ bottom:30
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ axisLabel:{
|
|
|
+
|
|
|
+ interval:6,
|
|
|
+ rotate:45,
|
|
|
+ formatter:function (value, index) {
|
|
|
+ return moment(value).format('HH') + _this.$t('sleepData.Hour');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine:false,
|
|
|
+ axisLabel:{
|
|
|
+ formatter:function(value,index){
|
|
|
+ if(value==1){
|
|
|
+ return _this.$t('sleepData.DeepSleep')
|
|
|
+ }
|
|
|
+ if(value==2){
|
|
|
+ return _this.$t('sleepData.LightSleep')
|
|
|
+ }
|
|
|
+ if(value==3){
|
|
|
+ return _this.$t('sleepData.Awake')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [3, 2, 2, 3, 1, 1, 3],
|
|
|
+ type: 'line',
|
|
|
+ areaStyle: {},
|
|
|
+ smooth:true,
|
|
|
+ lineStyle:{
|
|
|
+ width:4
|
|
|
+ },
|
|
|
+ symbol:false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ gaugeOption:
|
|
|
+ {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: 90,
|
|
|
+ endAngle: -270,
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ overlap: false,
|
|
|
+ roundCap: true,
|
|
|
+ clip: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#fac858'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ distance: 0,
|
|
|
+ length: 10
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ distance: 50
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 87,
|
|
|
+ name: this.$t('sleepData.Quality'),
|
|
|
+ title: {
|
|
|
+ offsetCenter: ['0%', '30%']
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: ['0%', '-10%']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ title: {
|
|
|
+ fontSize: 15
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ width: 50,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#f00',
|
|
|
+ borderColor: 'auto',
|
|
|
+ borderRadius: 0,
|
|
|
+ borderWidth: 0,
|
|
|
+ formatter: '{value}%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ pieOption:{
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function(params){
|
|
|
+ return params.name+' '+Math.floor(params.value/60)+_this.$t('sleepData.Hour')+Math.floor(params.value%60)+_this.$t('sleepData.Minute')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient:'vertical',
|
|
|
+ right: '10%',
|
|
|
+ top:'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '睡眠时长分布',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10,
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'left',
|
|
|
+
|
|
|
+ formatter: function(params){
|
|
|
+ return params.name+' '+Math.floor(params.value/60)+_this.$t('sleepData.Hour')+Math.floor(params.value%60)+_this.$t('sleepData.Minute')+'('+params.percent+'%)'
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '14',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 20, name: _this.$t('sleepData.Awake') },
|
|
|
+ { value: 70, name: _this.$t('sleepData.LightSleep') },
|
|
|
+ { value: 10, name: _this.$t('sleepData.DeepSleep') }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ dialogWidth: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted(){
|
|
|
+ if(this.$i18n.locale==='zh'){
|
|
|
+ require('moment/locale/zh-cn')
|
|
|
+ }else if(this.$i18n.locale==='en'){
|
|
|
+ require('moment/locale/en-in')
|
|
|
+ }
|
|
|
+ this.dialogWidth =this.$parent.$parent.$el.clientWidth-30
|
|
|
+ moment.locale()
|
|
|
+
|
|
|
+console.log(this.dialogWidth)
|
|
|
+ this.$nextTick(function () {
|
|
|
+ // this.dialogWidth=this.$parent.$refs.changeBedForm.clientWidth
|
|
|
+ console.log()
|
|
|
+ this.sleepChart= this.$echarts.init(document.getElementById('chartSleep'))
|
|
|
+ this.pieChart= this.$echarts.init(document.getElementById('pieChart'))
|
|
|
+ this.gaugeChart= this.$echarts.init(document.getElementById('gaugeChart'))
|
|
|
+ this.sleepChart.clear()
|
|
|
+ this.sleepChart.setOption(this.option)
|
|
|
+ this.gaugeChart.setOption(this.gaugeOption)
|
|
|
+ this.pieChart.setOption(this.pieOption)
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ this.getSleepData(this.memberId,moment().format('YYYY-MM-DD'))
|
|
|
+ // console.log(document.getElementById("charsPanel").clientWidth)
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ chooseDateChange(val){
|
|
|
+ if(val!==null){
|
|
|
+ let dateStr = moment(val).format('YYYY-MM-DD')
|
|
|
+ this.getSleepData(this.memberId,dateStr)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getSleepData(memberId,datastr){
|
|
|
+ API_SleepData.getSleepData(memberId,datastr).then(res=>{
|
|
|
+ console.log('res',res)
|
|
|
+ if(res!==''){
|
|
|
+ API_SleepData.getJsonData(res.json_data_url).then(rs=>{
|
|
|
+
|
|
|
+ this.sleepDataJson=rs
|
|
|
+ this.gaugeOption.series[0].data[0].value=rs.sleepScore
|
|
|
+ this.gaugeChart.setOption(this.gaugeOption)
|
|
|
+ this.pieOption.series[0].data[0].value=rs.sleepPieSeries[0]
|
|
|
+ this.pieOption.series[0].data[1].value=rs.sleepPieSeries[1]
|
|
|
+ this.pieOption.series[0].data[2].value=rs.sleepPieSeries[2]
|
|
|
+ this.pieChart.setOption(this.pieOption)
|
|
|
+ this.option.xAxis.data=[...rs.sleepStatusXaxis]
|
|
|
+ this.option.series[0].data=[...rs.sleepStatusYaxis]
|
|
|
+ this.sleepChart.setOption(this.option)
|
|
|
+ console.log('json',rs)
|
|
|
+ }).catch(er=>{
|
|
|
+ this.sleepDataJson=null
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.sleepDataJson=null
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ this.sleepDataJson=null
|
|
|
+ console.log('err',err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+<style type="text/scss" lang="scss" scoped>
|
|
|
+.sleep_datashow_item {
|
|
|
+ h2{
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 0px;
|
|
|
+ span{
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
