<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>
