You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
866 lines
26 KiB
Vue
866 lines
26 KiB
Vue
<template>
|
|
|
|
|
|
<view style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
|
|
|
<view
|
|
style="display: flex;flex-direction: column;margin-top: 20rpx;width: 95%;justify-content: center;background: #FFFFFF;margin-top: 20upx;border-radius: 50upx;">
|
|
|
|
<view
|
|
style="display: flex;flex-direction: row;justify-content:space-around;;align-items: center;min-height: 80upx;border-top-left-radius: 50upx;border-top-right-radius: 50upx;">
|
|
<view @click="change(1)":class="froms=='1'?'red':''">体重</view>
|
|
<view @click="change(2)":class="froms=='2'?'red':''">饮食</view>
|
|
<view @click="change(3)":class="froms=='3'?'red':''">步数</view>
|
|
<view @click="change(4)":class="froms=='4'?'red':''">饮水</view>
|
|
</view>
|
|
<view class="">
|
|
<view
|
|
style="display: flex;justify-content:space-between;flex-direction: row;align-items: center;margin-top: 40upx;">
|
|
<view class="" style="margin-left: 20upx">
|
|
<u-button size="mini" shape="circle"@click="datechange">上一周数据</u-button>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row;">
|
|
<view >{{date.start}}</view>----<view >{{date.end}}</view>
|
|
</view>
|
|
<view style="margin-right: 20upx">
|
|
<u-button size="mini" shape="circle"@click="datechanged">下一周数据</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
<view :class="none=='1'?'none':''">
|
|
<eCharts ref="eCharts" />
|
|
</view>
|
|
<view style="margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;">
|
|
<u-button :ripple="true" ripple-bg-color="#909399" size="medium" shape="circle"
|
|
@click="changeshow()">记录数据</u-button>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view
|
|
style="width: 95%;display: flex;flex-direction: column;background: #FFFFFF;margin-top: 40upx;border-radius: 50upx;">
|
|
<view style="width: 100%;font-size: 20px;margin-top: 20upx;
|
|
text-align:center;">
|
|
睡眠数据表
|
|
</view>
|
|
<view class="">
|
|
<view
|
|
style="display: flex;justify-content:space-between;flex-direction: row;align-items: center;margin-top: 40upx;">
|
|
<view class="" style="margin-left: 20upx">
|
|
<u-button size="mini" shape="circle"@click="datechange">上一周数据</u-button>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row;">
|
|
<view >{{date.start}}</view>----<view >{{date.end}}</view>
|
|
</view>
|
|
<view style="margin-right: 20upx">
|
|
<u-button size="mini" shape="circle"@click="datechanged">下一周数据</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row;width: 95%;margin-top: 20upx;margin-left: 2.5%;">
|
|
<u-table border stripe emptyText="暂无更多数据" :columns="columns" style="border-radius: 150px;width: 23%;">
|
|
<u-tr>
|
|
<u-td class="box_cus">睡眠</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">日期</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Monday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Tuesday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Wednesday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Thursday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Friday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Saturday</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">Sunday</u-td>
|
|
</u-tr>
|
|
</u-table>
|
|
<u-table border stripe emptyText="暂无更多数据" :columns="columns" style="border-radius: 150px;width: 80%;">
|
|
|
|
<u-tr width="100%">
|
|
<u-td class="box_cus">午睡</u-td>
|
|
<u-td class="box_cus">晚睡</u-td>
|
|
</u-tr>
|
|
<u-tr width="100%">
|
|
<u-td class="box_bt box_cus">入睡</u-td>
|
|
<u-td class="box_bt box_cus">醒来</u-td>
|
|
<u-td class="box_bt box_cus">时长</u-td>
|
|
<u-td class="box_bt box_cus">入睡</u-td>
|
|
<u-td class="box_bt box_cus">醒来</u-td>
|
|
<u-td class="box_bt box_cus">时长</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">13:00</u-td>
|
|
<u-td class="box_cus">15:00</u-td>
|
|
<u-td class="box_cus">2H</u-td>
|
|
<u-td class="box_cus">23:00</u-td>
|
|
<u-td class="box_cus">8:00</u-td>
|
|
<u-td class="box_cus">9H</u-td>
|
|
</u-tr>
|
|
|
|
|
|
|
|
</u-table>
|
|
</view>
|
|
<view
|
|
style="margin-bottom: 40upx;display: flex;justify-content:space-around;align-items: center;margin-top: 20upx;">
|
|
<u-button :ripple="true" ripple-bg-color="#909399" size="medium" shape="circle" @click="changeshowa()">
|
|
午睡</u-button>
|
|
<u-button :ripple="true" ripple-bg-color="#909399" size="medium" shape="circle" @click="changeshowb()">
|
|
晚睡</u-button>
|
|
</view>
|
|
</view>
|
|
<!-- <eCharts :type='type' :Column='Columns' :min="mins" :max="maxs" />
|
|
<eCharts :type='type' :Column='Columne' :min="mine" :max="maxe" /> -->
|
|
<view
|
|
style="width: 95%;display: flex;flex-direction: column;background: #FFFFFF;margin-top: 40upx;border-radius: 50upx;margin-bottom: 20upx;">
|
|
<view style="width: 100%;font-size: 20px;margin-top: 20upx;
|
|
text-align:center;">
|
|
便便数据表
|
|
</view>
|
|
<view class="">
|
|
<view
|
|
style="display: flex;justify-content:space-between;flex-direction: row;align-items: center;margin-top: 40upx;">
|
|
<view class="" style="margin-left: 20upx">
|
|
<u-button size="mini" shape="circle" @click="datechange">上一周数据</u-button>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row;">
|
|
<view >{{date.start}}</view>----<view >{{date.end}}</view>
|
|
</view>
|
|
<view style="margin-right: 20upx">
|
|
<u-button size="mini" shape="circle" @click="datechanged">下一周数据</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row;width: 95%;margin-top: 20upx;margin-left: 2.5%;">
|
|
<u-table border stripe emptyText="暂无更多数据" :columns="columns" style="border-radius: 150px;width: 15%;">
|
|
<u-tr>
|
|
<u-td class="box_cus">日期</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周一</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周二</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周三</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周四</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周五</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周六</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">周日</u-td>
|
|
</u-tr>
|
|
</u-table>
|
|
<u-table border stripe emptyText="暂无更多数据" :columns="columns" style="border-radius: 150px;width:85%;">
|
|
<!-- 表头行 -->
|
|
<u-tr width="100%">
|
|
<u-td class="box_bt box_cus">形态</u-td>
|
|
<u-td class="box_bt box_cus">颜色</u-td>
|
|
<u-td class="box_bt box_cus">分量</u-td>
|
|
<u-td class="box_bt box_cus">气味</u-td>
|
|
<u-td class="box_bt box_cus">感受</u-td>
|
|
<u-td class="box_bt box_cus">粘度</u-td>
|
|
<u-td class="box_bt box_cus">开始</u-td>
|
|
<u-td class="box_bt box_cus">时长</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
<u-tr>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
<u-td class="box_cus">无</u-td>
|
|
</u-tr>
|
|
|
|
<!-- 表格数据行 -->
|
|
|
|
</u-table>
|
|
</view>
|
|
<view
|
|
style="margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;margin-top: 20upx;">
|
|
<u-button :ripple="true" ripple-bg-color="#909399" size="medium" shape="circle"@click="changeshowc()">记录数据</u-button>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="cu-modal" :class="modalName=='1'?'show':''">
|
|
<view class="cu-dialog ">
|
|
<view class="cu-bar justify-end bg-gray">
|
|
<view class="content">输入体重</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>早餐:</view>
|
|
<input class="margin-left" maxlength="11" type="text" v-model="KG" placeholder="单位:千卡" />
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-gray">
|
|
<view class="action margin-0 flex-sub solid-right" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-modal" :class="modalName=='2'?'show':''">
|
|
<view class="cu-dialog ">
|
|
<view class="cu-bar justify-end bg-gray">
|
|
<view class="content">输入三餐热量</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>早餐:</view>
|
|
<input class="margin-left" maxlength="11" type="text" v-model="KG" placeholder="单位:千卡" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>午餐:</view>
|
|
<input class="margin-left" type="text" v-model="KGs" placeholder="单位:千卡" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>午餐:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGe" placeholder="单位:千卡" />
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-gray">
|
|
<view class="action margin-0 flex-sub solid-right" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-modal" :class="modalName=='7'?'show':''">
|
|
<view class="cu-dialog ">
|
|
<view class="cu-bar justify-end bg-gray">
|
|
<view class="content">输入便便参数</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>形态</view>
|
|
<input class="margin-left" maxlength="11" type="text" v-model="KG" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>颜色:</view>
|
|
<input class="margin-left" type="password" v-model="KGa" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>分量:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGs" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>气味:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGd" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>感受:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGf" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>粘度:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGg" />
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>开始:</view>
|
|
<input class="margin-left" type="text" maxlength="11" v-model="KGh"/>
|
|
</view>
|
|
<view class="cu-form-group solid-bottom" @click="showclickp">
|
|
<view>时长:</view>
|
|
<view class="u-demo-result-line">{{ inputp ? inputp : '输入上厕持续时间' }}</view>
|
|
<u-picker :mode="mode" v-model="showp" :params="paramp" @confirm="confirmp"></u-picker>
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-gray">
|
|
<view class="action margin-0 flex-sub solid-right" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-modal" :class="modalName=='5'?'show':''">
|
|
<view class="cu-dialog ">
|
|
<view class="cu-bar justify-end bg-gray">
|
|
<view class="content">午睡</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view class="cu-form-group solid-bottom" @click="showclick">
|
|
<view>入睡</view>
|
|
<view class="u-demo-result-line">{{ input ? input : '输入入睡时间' }}</view>
|
|
<u-picker :mode="mode" v-model="show" :params="params" @confirm="confirm"></u-picker>
|
|
</view>
|
|
<view class="cu-form-group solid-bottom" @click="showclicke">
|
|
<view>醒来:</view>
|
|
<view class="u-demo-result-line">{{ inputs ? inputs : '输入醒来时间' }}</view>
|
|
<u-picker :mode="mode" v-model="showe" :params="paramsg" @confirm="confirms"></u-picker>
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>时长:</view>
|
|
<view>{{ timechange ? timechange : '睡眠时长' }}</view>
|
|
<u-picker :mode="mode" v-model="showo" :params="paramsg"></u-picker </view>
|
|
</view>
|
|
<view class="cu-bar bg-gray">
|
|
<view class="action margin-0 flex-sub solid-right" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-modal" :class="modalName=='6'?'show':''">
|
|
<view class="cu-dialog ">
|
|
<view class="cu-bar justify-end bg-gray">
|
|
<view class="content">晚睡</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view class="cu-form-group solid-bottom" @click="showclicks">
|
|
<view>入睡</view>
|
|
<view class="u-demo-result-line">{{ inpute ? inpute : '输入入睡时间' }}</view>
|
|
<u-picker :mode="mode" v-model="shows" :params="paramse" @confirm="confirme"></u-picker>
|
|
</view>
|
|
<view class="cu-form-group solid-bottom" @click="showclickse">
|
|
<view>醒来:</view>
|
|
<view class="u-demo-result-line">{{ inputes ? inputes : '输入醒来时间' }}</view>
|
|
<u-picker :mode="mode" v-model="showse" :params="paramseg" @confirm="confirmse"></u-picker>
|
|
</view>
|
|
<view class="cu-form-group solid-bottom">
|
|
<view>时长:</view>
|
|
<view>{{ timechanges ? timechanges : '睡眠时长' }}</view>
|
|
<u-picker :mode="mode" v-model="showo" :params="paramsg"></u-picker </view>
|
|
</view>
|
|
<view class="cu-bar bg-gray">
|
|
<view class="action margin-0 flex-sub solid-right" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
mode: "time",
|
|
input: '',
|
|
inputs: '',
|
|
inputp: '',
|
|
|
|
inpute: '',
|
|
inputes: '',
|
|
timechange: "",
|
|
timechanges: "",
|
|
time: '',
|
|
times: '',
|
|
timea: '',
|
|
timeas: '',
|
|
date:{
|
|
start:"10.03",
|
|
end:"10.09"
|
|
},
|
|
paramp: {
|
|
year: false,
|
|
month: false,
|
|
day: false,
|
|
hour: true,
|
|
minute: true,
|
|
timestamp: true,
|
|
},
|
|
params: {
|
|
year: false,
|
|
month: false,
|
|
day: false,
|
|
hour: true,
|
|
minute: true,
|
|
timestamp: true,
|
|
},
|
|
paramsg: {
|
|
year: false,
|
|
month: false,
|
|
day: false,
|
|
hour: true,
|
|
minute: true,
|
|
timestamp: true,
|
|
},
|
|
paramse: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
timestamp: true,
|
|
},
|
|
paramseg: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
timestamp: true,
|
|
},
|
|
show: false,
|
|
showp: false,
|
|
shows: false,
|
|
showse: false,
|
|
showe: false,
|
|
showo: false,
|
|
type: 'line',
|
|
KG: "",
|
|
KGz: "100",
|
|
froms: 1,
|
|
Column: {
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
"series": [{
|
|
"name": "体重图(千克)",
|
|
"data": [100, 97, 98, 100, 97, 100, 100],
|
|
|
|
}]
|
|
},
|
|
|
|
|
|
Columns: {
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
"series": [{
|
|
"name": "早餐(千卡)",
|
|
"data": [400, 450, 500, 550, 350, 300, 450],
|
|
|
|
},
|
|
{
|
|
"name": "午餐(千卡)",
|
|
"data": [600, 650, 700, 750, 550, 500, 650],
|
|
|
|
},
|
|
{
|
|
"name": "晚餐(千卡)",
|
|
"data": [500, 550, 600, 650, 450, 400, 550],
|
|
|
|
},
|
|
]
|
|
},
|
|
Columng: {
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
"series": [{
|
|
"name": "矿泉水(毫升)",
|
|
"data": [1400, 850, 1500, 550, 750, 1300, 1450],
|
|
|
|
},
|
|
{
|
|
"name": "非矿泉水(毫升)",
|
|
"data": [600, 1650, 700, 1750, 1550, 800, 650],
|
|
|
|
},
|
|
]
|
|
},
|
|
Columne: {
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
"series": [{
|
|
"name": "步数(步)",
|
|
"data": [10000, 9700, 9800, 10000, 9700, 10200, 10400],
|
|
|
|
}]
|
|
},
|
|
min: 95,
|
|
max: 105,
|
|
mins: 200,
|
|
maxs: 800,
|
|
mine: 9500,
|
|
maxe: 10500,
|
|
ming: 700,
|
|
maxg: 1800,
|
|
modalName: null,
|
|
none:""
|
|
}
|
|
},
|
|
mounted() {
|
|
//声明this
|
|
this.$nextTick(() => {
|
|
this.change(1)
|
|
})
|
|
|
|
},
|
|
|
|
methods: {
|
|
datechange(){
|
|
this.date.start="09.26"
|
|
this.date.end="10.02"
|
|
console.log("--------------")
|
|
},
|
|
datechanged(){
|
|
this.date.start="10.10"
|
|
this.date.end="10.16"
|
|
},
|
|
confirm(e) {
|
|
console.log(e);
|
|
this.input = '';
|
|
if (this.mode == 'time') {
|
|
if (this.params.year) this.input += e.year;
|
|
if (this.params.month) this.input += '/' + e.month;
|
|
if (this.params.day) this.input += '/' + e.day;
|
|
if (this.params.hour) this.input += ' ' + e.hour;
|
|
if (this.params.minute) this.input += ':' + e.minute;
|
|
if (this.params.second) this.input += ':' + e.second;
|
|
if (this.params.timestamp) this.tiem = e.timestamp;
|
|
}
|
|
},
|
|
confirmp(e) {
|
|
console.log(e);
|
|
this.inputp = '';
|
|
if (this.mode == 'time') {
|
|
if (this.paramp.year) this.inputp += e.year;
|
|
if (this.paramp.month) this.inputp += '/' + e.month;
|
|
if (this.paramp.day) this.inputp += '/' + e.day;
|
|
if (this.paramp.hour) this.inputp += ' ' + e.hour;
|
|
if (this.paramp.minute) this.inputp += ':' + e.minute;
|
|
if (this.paramp.second) this.inputp += ':' + e.second;
|
|
}
|
|
},
|
|
confirms(e) {
|
|
console.log(e);
|
|
this.inputs = '';
|
|
if (this.mode == 'time') {
|
|
if (this.paramsg.year) this.inputs += e.year;
|
|
if (this.paramsg.month) this.inputs += '/' + e.month;
|
|
if (this.paramsg.day) this.inputs += '/' + e.day;
|
|
if (this.paramsg.hour) this.inputs += ' ' + e.hour;
|
|
if (this.paramsg.minute) this.inputs += ':' + e.minute;
|
|
if (this.paramsg.second) this.inputs += ':' + e.second;
|
|
if (this.paramsg.timestamp) this.tiems = e.timestamp;
|
|
}
|
|
console.log(parseInt(this.tiems))
|
|
console.log(parseInt(this.tiem))
|
|
var date3 = parseInt((this.tiems) * 1 - parseInt(this.tiem) * 1) * 1000; //获取毫秒数
|
|
var days = Math.floor(date3 / (24 * 3600 * 1000));
|
|
//计算出小时数
|
|
var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
|
|
var hours = Math.floor(leave1 / (3600 * 1000));
|
|
//计算相差分钟数
|
|
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
|
|
var minutes = Math.floor(leave2 / (60 * 1000));
|
|
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
|
|
var seconds = Math.round(leave3 / 1000);
|
|
this.timechange = hours + "小时 " + minutes + " 分钟"
|
|
},
|
|
confirme(e) {
|
|
console.log(e);
|
|
this.inpute = '';
|
|
if (this.mode == 'time') {
|
|
this.inpute += e.year;
|
|
this.inpute += '/' + e.month;
|
|
this.inpute += '/' + e.day;
|
|
if (this.paramse.hour) this.inpute += ' ' + e.hour;
|
|
if (this.paramse.minute) this.inpute += ':' + e.minute;
|
|
if (this.paramse.second) this.inpute+= ':' + e.second;
|
|
if (this.paramse.timestamp) this.tiema = e.timestamp;
|
|
}
|
|
console.log(this.inpute)
|
|
},
|
|
confirmse(e) {
|
|
console.log(e);
|
|
this.inputes = '';
|
|
if (this.mode == 'time') {
|
|
this.inputes += e.year;
|
|
this.inputes += '/' + e.month;
|
|
this.inputes += '/' + e.day;
|
|
if (this.paramseg.hour) this.inputes += ' ' + e.hour;
|
|
if (this.paramseg.minute) this.inputes += ':' + e.minute;
|
|
if (this.paramseg.second) this.inputes += ':' + e.second;
|
|
if (this.paramseg.timestamp) this.tiemas = e.timestamp;
|
|
}
|
|
console.log(parseInt(this.tiems))
|
|
console.log(parseInt(this.tiem))
|
|
var date3 = parseInt((this.tiemas) * 1 - parseInt(this.tiema) * 1) * 1000; //获取毫秒数
|
|
var days = Math.floor(date3 / (24 * 3600 * 1000));
|
|
//计算出小时数
|
|
var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
|
|
var hours = Math.floor(leave1 / (3600 * 1000));
|
|
//计算相差分钟数
|
|
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
|
|
var minutes = Math.floor(leave2 / (60 * 1000));
|
|
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
|
|
var seconds = Math.round(leave3 / 1000);
|
|
this.timechanges = hours + "小时 " + minutes + " 分钟"
|
|
},
|
|
getTime(e) {
|
|
console.log(e)
|
|
},
|
|
showclick() {
|
|
this.show = true
|
|
this.input=""
|
|
|
|
},
|
|
showclicke() {
|
|
this.showe = true
|
|
this.inputs=""
|
|
|
|
},
|
|
showclicks() {
|
|
this.shows = true
|
|
this.inpute = '';
|
|
},
|
|
showclickse() {
|
|
this.showse = true
|
|
this.inputes = '';
|
|
},
|
|
showclickp() {
|
|
this.showp = true
|
|
this.inputp = '';
|
|
},
|
|
hideModal(e) {
|
|
//关闭model弹窗
|
|
this.modalName = null
|
|
this.KG = ""
|
|
this.none=""
|
|
},
|
|
showModal(e) {
|
|
//打开model弹窗
|
|
this.modalName = e.currentTarget.dataset.target
|
|
},
|
|
change(from) {
|
|
if (from == 1) {
|
|
this.$refs.eCharts.show(this.type, this.Column, this.max, this.min)
|
|
this.froms = 1
|
|
}
|
|
if (from == 2) {
|
|
this.$refs.eCharts.show(this.type, this.Columns, this.maxs, this.mins)
|
|
this.froms = 2
|
|
}
|
|
if (from == 3) {
|
|
this.$refs.eCharts.show(this.type, this.Columne, this.maxe, this.mine)
|
|
this.froms = 3
|
|
}
|
|
if (from == 4) {
|
|
this.$refs.eCharts.show(this.type, this.Columng, this.maxg, this.ming)
|
|
this.froms = 4
|
|
}
|
|
|
|
},
|
|
changeshow() {
|
|
|
|
if (this.froms == 1) {
|
|
this.modalName = 1
|
|
this.none=1;
|
|
}
|
|
if (this.froms == 2) {
|
|
this.modalName = 2
|
|
this.none=1;
|
|
}
|
|
if (this.froms == 4) {
|
|
this.modalName = 4
|
|
|
|
}
|
|
if (this.froms == 3) {
|
|
this.modalName = 3
|
|
|
|
}
|
|
|
|
},
|
|
changeshowa() {
|
|
this.modalName = 5
|
|
this.none=1;
|
|
},
|
|
changeshowb() {
|
|
this.modalName = 6
|
|
this.none=1;
|
|
|
|
},
|
|
changeshowc() {
|
|
this.modalName =7
|
|
this.none=1;
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.charts {
|
|
width: 650upx;
|
|
height: 380upx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50upx;
|
|
}
|
|
|
|
.warp {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.rect {
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: #fff;
|
|
}
|
|
.red{
|
|
color:orangered
|
|
}
|
|
.none{
|
|
display: none;
|
|
}
|
|
</style>
|