|
<template>
<div id="healthRecord">
<hc-tabs tab-position="left" v-model="tabActive" @tab-click="tabHandleClick" style="height:200px;width:90px;">
<el-tab-pane label="体重" name="weight"> </el-tab-pane>
<el-tab-pane label="步数" name="step"> </el-tab-pane>
<el-tab-pane label="运动" name="sport"> </el-tab-pane>
<el-tab-pane label="饮食" name="eat"> </el-tab-pane>
</hc-tabs>
<div class="record_main" ref="record_main">
<div class="record_weight_main record_main_content" id="weight">
<div class="record_title">
<div class="record_title_left">
<span class="title">体重记录 （KG）</span>
<span>连续体重打卡{{weightDays}}天</span>
</div>
<div class="record_title_right">
<hc-date-range v-model="weight_RangeValue" :clearField="clearField" class="hc-date-range" :pickerOptionsBegin="pickerOptionsBegin" :pickerOptionsEnd="pickerOptionsEnd"></hc-date-range>
<hc-button @click="weightSearch" size="mini" class="searchBtn">查询</hc-button>
<hc-button @click="weightToChart" size="mini" class="change-btn">{{ weightChartFlag ? "折线图" : "列 表" }}
</hc-button>
</div>
</div>
<div v-show="weightChartFlag">
<hc-table :data="weightData" border fit size="small" v-if="weightData.length>0">
<hc-table-column type="index" label="序号" width="60"></hc-table-column>
<hc-table-column prop="content" label="体重（kg）" width="120"></hc-table-column>
<hc-table-column prop="ordDate" label="记录时间" width="150"></hc-table-column>
<hc-table-column prop="userRemark" label="客户备注" min-width="150"></hc-table-column>
<hc-table-column prop="dataSourceName" label="数据来源" min-width="100"></hc-table-column>
</hc-table>
<hc-pagination @size-change="handleSizeChangeWeight" @current-change="handleCurrentChangeWeight" :current-page="weightCurrentPage" :page-sizes="weightPageSizes" :page-size="weightPageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalWeight" v-if="weightData.length>0">
</hc-pagination>
<hc-empty flag="0" emptyText="暂无数据，客户未进行体重记录" v-show='weightData.length===0'></hc-empty>
</div>
<div v-show="!weightChartFlag">
<div class="echarts-box" id="weightChartId" v-show='weightChartShow'></div>
<hc-empty flag="0" emptyText="暂无数据，客户未进行体重记录" v-if='!weightChartShow'></hc-empty>
</div>
</div>
<div class="record_weight_main record_main_content" id="step">
<div class="record_title">
<div class="record_title_left">
<span class="title">步数趋势 （步）</span>
<span>连续打卡{{stepDays}}天</span>
</div>
<div class="record_title_right">
<hc-date-range v-model="step_RangeValue" :clearField="clearField" class="hc-date-range" :pickerOptionsBegin="pickerOptionsBeginStep" :pickerOptionsEnd="pickerOptionsEndStep"></hc-date-range>
<hc-button @click="stepSearch" size="mini" class="searchBtn">查询</hc-button>
<hc-button @click="stepToChart" size="mini" class="change-btn">{{ stepChartFlag ? "折线图" : "列 表" }}
</hc-button>
</div>
</div>
<div v-if="stepChartFlag">
<hc-table :data="stepData" border fit size="small" v-if="stepData.length>0">
<hc-table-column type="index" label="序号" width="60"></hc-table-column>
<hc-table-column prop="content" label="步数" width="100"></hc-table-column>
<hc-table-column prop="ordDate" label="记录时间" width="150"></hc-table-column>
<hc-table-column prop="userTerminal" label="客户终端" min-width="120"></hc-table-column>
<hc-table-column prop="dataSourceName" label="数据来源" min-width="100"></hc-table-column>
<hc-table-column prop="userRemark" label="备注" min-width="100"></hc-table-column>
</hc-table>
<hc-pagination @size-change="handleSizeChangeStep" @current-change="handleCurrentChangeStep" :current-page="stepCurrentPage" :page-sizes="stepPageSizes" :page-size="stepPageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalStep" v-if="stepData.length>0">
</hc-pagination>
<hc-empty flag="0" emptyText="暂无数据，客户未进行步数记录" v-show='stepData.length==0'></hc-empty>
</div>
<div v-show="!stepChartFlag">
<div class="echarts-box" id="stepChartId" v-show='stepChartShow'></div>
<hc-empty flag="0" emptyText="暂无数据，客户未进行步数记录" v-if='!stepChartShow'></hc-empty>
</div>
</div>
<div class="record_weight_main record_main_content" id="sport">
<div class="record_title">
<div class="record_title_left">
<span class="title">运动打卡记录</span>
<span>连续运动打卡{{sportDays}}天</span>
</div>
<div class="record_title_right">
<hc-date-range v-model="sport_RangeValue" :clearField="clearField" class="hc-date-range" :pickerOptionsBegin="pickerOptionsBeginSport" :pickerOptionsEnd="pickerOptionsEndSport"></hc-date-range>
<hc-button @click="sportSearch" size="mini" class="searchBtn">查询</hc-button>
</div>
</div>
<div>
<hc-table :data="sportData" border fit size="small" :span-method="objectSpanMethod" v-if="sportData.length>0">
<hc-table-column type="index" label="序号" width="60"></hc-table-column>
<hc-table-column prop="ordDate" label="记录时间" width="150"></hc-table-column>
<hc-table-column prop="subTypeName" label="运动方式" width="110"></hc-table-column>
<hc-table-column prop="content" label="运动时长（分钟）" width="130"></hc-table-column>
<hc-table-column prop="contentRemark" label="消耗能量（千焦）" width="130"></hc-table-column>
<hc-table-column prop="userRemark" label="客户备注" min-width="150"></hc-table-column>
<hc-table-column prop="dataSourceName" label="数据来源" min-width="100"></hc-table-column>
</hc-table>
<hc-pagination @size-change="handleSizeChangeSport" @current-change="handleCurrentChangeSport" :current-page="sportCurrentPage" :page-sizes="sportPageSizes" :page-size="sportPageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSport" v-if="sportData.length>0">
</hc-pagination>
<hc-empty flag="0" emptyText="暂无数据，客户未进行运动记录" v-show='sportData.length===0'></hc-empty>
</div>
</div>
<div class="record_weight_main record_main_content" id="eat">
<div class="record_title">
<div class="record_title_left">
<span class="title">饮食记录</span>
<span>连续饮食打卡{{eatDays}}天</span>
</div>
<div class="record_title_right">
<hc-date-range v-model="eat_RangeValue" :clearField="clearField" class="hc-date-range" :pickerOptionsBegin="pickerOptionsBeginEat" :pickerOptionsEnd="pickerOptionsEndEat"></hc-date-range>
<hc-button @click="eatSearch" size="mini" class="searchBtn">查询</hc-button>
</div>
</div>
<div>
<hc-table :data="eatData" border fit size="small" :span-method="objectSpanMethodEat" v-if="eatData.length>0">
<hc-table-column type="index" label="序号" width="60"></hc-table-column>
<hc-table-column prop="ordDate" label="记录时间" width="150"></hc-table-column>
<hc-table-column prop="totalEnergy" label="摄入能量 (千卡)" width="110"></hc-table-column>
<hc-table-column prop="typeName" label="食物类型" width="110"></hc-table-column>
<hc-table-column prop="subTypeName" label="食品名称" width="110"></hc-table-column>
<hc-table-column prop="content" label="重量 (g)" min-width="100"></hc-table-column>
<hc-table-column prop="contentRemark" label="能量 (千卡)" min-width="120"></hc-table-column>
<hc-table-column prop="carbsPart" label="碳水 (g)" min-width="100"></hc-table-column>
<hc-table-column prop="fatPart" label="脂肪 (g)" min-width="100"></hc-table-column>
<hc-table-column prop="proteinPart" label="蛋白质 (g)" min-width="100"></hc-table-column>
<hc-table-column prop="userRemark" label="客户备注" min-width="150"></hc-table-column>
<hc-table-column prop="dataSourceName" label="数据来源" min-width="80"></hc-table-column>
</hc-table>
<hc-pagination @size-change="handleSizeChangeEat" @current-change="handleCurrentChangeEat" :current-page="eatCurrentPage" :page-sizes="eatPageSizes" :page-size="eatPageSize" layout="total, sizes, prev, pager, next, jumper" :total="totaleat" v-if="eatData.length>0">
</hc-pagination>
<hc-empty flag="0" emptyText="暂无数据，客户未进行饮食记录" v-show='eatData.length===0'></hc-empty>
</div>
</div>
</div>
</div>
</template>
handleScroll() {
let scrollTop = this.$refs.record_main.scrollTop;
let blocks = document.querySelectorAll('.record_main_content');
blocks.forEach((item, i) => {
if(scrollTop >= item.offsetTop) {
if(i === 0) {
this.tabActive = 'weight';
} else if(i === 1) {
this.tabActive = 'step';
} else if(i === 2) {
this.tabActive = 'sport';
} else if(i === 3) {
this.tabActive = 'eat';
}
}
})
},
tabHandleClick(tab, event) {
console.log(tab.name);
let height = this.$refs.record_main.scrollTop;
let dom = document.getElementById(tab.name);
let domHeight = dom.offsetTop;
console.log(domHeight);
var S = Number(height) - Number(domHeight);
if(S < 0) {
S = Math.abs(S);
this.$refs.record_main.scrollBy({
top: S,
behavior: "smooth"
});
} else if(S == 0) {
this.$refs.record_main.scrollBy({
top: 0,
behavior: "smooth"
});
} else {
S = -S;
this.$refs.record_main.scrollBy({
top: S,
behavior: "smooth"
});
}
},
|
