sisMobilePhone/components/bracelet/raceletDetails/heartbeatDetails.vue

<template>
	<view>
		<!-- 导航栏 -->
		<view @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view>
				</block>
				<block slot="content">
					<view style="color: silver;">{{name}}历史曲线</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="All">
		<!-- 心跳标签 -->
		
			<view class="heartbeatLabel">
				
						<div class="zhiti heartbeat">{{name}}</div>
						<div class="zhiti heartbeat">{{realValue}}</div>
						<div class="zhiti heartbeat">{{unit}}</div>
			</view>
			
		<!-- 日期时间选择器 -->
		
			<view class="chooseTime">
					<view class="timeSelector">
						<!-- <view>日期选择 - 示例</view>
						{{date}}
						<button type="primary" @click="onShowDatePicker('date')">选择日期</button>
						{{time}}
						<button type="primary" @click="onShowDatePicker('time')">选择时间</button>
						{{datetime}}
						<button type="primary" @click="onShowDatePicker('datetime')">选择日期时间</button>
						{{range[0]}} - {{range[1]}}
						<button type="primary" @click="onShowDatePicker('range')">选择日期范围</button> -->
						<div class="zhiti">{{rangetime[0]}} - {{rangetime[1]}}</div>  
						<button type="primary" @click="onShowDatePicker('rangetime')">选择日期时间范围</button>
					</view>
					<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="false" :begin-text="'运动开始'" :end-text="'运动结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			</view>
			
			<view titleC>
				<view class="curveTitle">{{name}}曲线图</view>
				<view class="garden" style="background-color:;"></view>
				<view class="curveTitle_1">{{unit}}</view>
			</view>
			<!-- 曲线图 -->
			<scroll-view scroll-x class="horizontalSlider">
				<view class="slide">
				<view class="graphHeartbeat">
					
					<view class="qiun-charts">
						<!-- <canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @ontouchstart="touchLineC" @ontouchmove="moveLineC" @ontouchend="touchEndLineC"></canvas> -->
						<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchLineC" ></canvas>
					</view>
				</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../tools/u-charts/u-charts.js';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	var _self;
	var canvaLineC=null;
	export default {
		data:function() {
			return {
				
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01','2019/01/06'],
				rangetime: ['2020/03/20 14:00','2020/03/21 13:59'],
				type: 'rangetime',
				value: '',
				XT_Num:[],
				braceletCurve_XTPL:{},
				beginTime:'',
				endTime:'',
				isFrameShow: false,
				count: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				sanJiao: 'sanJiaoDown',
				unit:'',
				color:'',
				name:'',
				realValue:''
			}	
		},
		
		onLoad(option){
			_self = this;
			this.braceletCurve_XTPL = JSON.parse(option.braceletCurve_XTPL_Details);
			this.realValue = option.dataInformation;
			this.unit = option.unit;
			this.color = option.color;
			this.name = option.name;
			
			this.cWidth = uni.upx2px(1850);
			this.cHeight = uni.upx2px(600);
			this.getServerData_C();
		},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#242424');
		},
		onShow:function(){
		},
		methods: {
			closeFrame: function() {
				this.count = this.count + 1;
				if (this.isFrameShow) {
					this.isFrameShow = false;
					this.sanJiao = 'sanJiaoDown';
				}
			},
			onShowDatePicker(type){//显示
							this.type = type;
							this.showPicker = true;
							this.value = this[type];
						},
						
			onSelected(e) {//选择
			
							let LineC = {
								categories: [
									'          17:26',
									'18:56',
									'19:56',
									'20:56',
									'21:56',
									'22:56',
									'23:56',
									'00:56',
									'01:56',
									'02:56',
									'03:56',
									'04:56',
									'05:56',
									'06:56',
									'07:56',
									'08:56',
									'09:56',
									'10:56',
									'11:56',
									'12:56',
									'13:56',
									'14:56',
									'15:56',
									'16:56',
									'17:56            '
								],
								series: [{
										pointShape:'triangle',
										name: this.name,
										data: [
										],
										color: this.color,
										textColor: '#ffffff',
										textSize: this.seriesTextSize,
										/* format: val => {
											return val + 'kwh';
										}, */
										index: 0,
										legendShape: 'circle'
									},
								]
							};
							
							Date.prototype.Format = function(fmt) {
								var o = {
									'M+': this.getMonth() + 1, //月份
									'd+': this.getDate(), //日
									'h+': this.getHours(), //小时
									'm+': this.getMinutes(), //分
									's+': this.getSeconds(), //秒
									'q+': Math.floor((this.getMonth() + 3) / 3), //季度
									S: this.getMilliseconds() //毫秒
								};
								if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
								for (var k in o)
									if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[
										k]).substr(('' + o[k]).length));
								return fmt;
							};
							
							this.showPicker = false;
							if(e) {
								this[this.type] = e.value; 
								//选择的值
								console.log('value => '+ e.value[0]);
								console.log('value => '+ e.value[1]);
								this.beginTime = new Date(e.value[0]).getTime();
								this.endTime = new Date(e.value[1]).getTime();
								console.log(this.endTime+"结束");
								console.log(this.beginTime+"开始");
								//原始的Date对象
								/* console.log('date => ' + e.date); */
								LineC.categories = [];
								LineC.series[0].data = [];
								for(var i=0;i<this.braceletCurve_XTPL.length;i++){
									if(this.braceletCurve_XTPL[i].ts<this.endTime&&this.braceletCurve_XTPL[i].ts>this.beginTime){
										LineC.series[0].data.push(this.braceletCurve_XTPL[i].value);
										LineC.categories.push(new Date(this.braceletCurve_XTPL[i].ts).Format('MM/dd mm:ss'));
										
									}
									
								};
								/* for(var j=0;j<(LineC.series[0].data).length;j++){
									LineC.categories.push(j);
								}; */
								/* for(var i=0;i<_this.braceletCurve_XTPL.length;i++){
									if(this.braceletCurve_XTPL[i].ts<this.endTime&&this.braceletCurve_XTPL[i].ts>this.beginTime){
									LineC.categories.push(new Date(_this.braceletCurve_XTPL[i].ts).Format('hh:mm'));
									}
								 } */
								this.showLineC('canvasLineC', LineC);
							}
							
						},
			choiceRange(){
				/* for(var i=0;i<braceletCurve_XTPL.length;i++){
					if(braceletCurve_XTPL[i].ts>this.endTime&&this.beginTime>braceletCurve_XTPL[i]){
						.push(braceletCurve_XTPL[i].value);
					}
				} */
				
			},		
		    getServerData_C() {
		    	// 折线图
		    	let LineC = {
		    		categories: [
		    			'          17:26',
		    			'18:56',
		    			'19:56',
		    			'20:56',
		    			'21:56',
		    			'22:56',
		    			'23:56',
		    			'00:56',
		    			'01:56',
		    			'02:56',
		    			'03:56',
		    			'04:56',
		    			'05:56',
		    			'06:56',
		    			'07:56',
		    			'08:56',
		    			'09:56',
		    			'10:56',
		    			'11:56',
		    			'12:56',
		    			'13:56',
		    			'14:56',
		    			'15:56',
		    			'16:56',
		    			'17:56            '
		    		],
				
		    		series: [{
		    				pointShape:'triangle',
		    				name: this.name,
		    				data: [
		    				],
		    				color: this.color,
		    				textColor: '#ffffff',
		    				textSize: this.seriesTextSize,
		    				/* format: val => {
		    					return val + 'kwh';
		    				}, */
		    				index: 0,
		    				/* legendShape: 'circle' */
		    			},
		    		]
		    	};
		    	
		    	
		    	let _this = this;
		    	LineC.categories = [];
		    	LineC.series[0].data = [];
		    	
		    	/* */
				/* 
				_this.lengthDate = */
				/* console.log("---");
				console.log((LineC.categories).length); */
		    	/* _this.braceletCurve_SSXY = _this.braceletCurve[_this.deviceNameSsxy]; */
		    	
		    	Date.prototype.Format = function(fmt) {
		    		var o = {
		    			'M+': this.getMonth() + 1, //月份
		    			'd+': this.getDate(), //日
		    			'h+': this.getHours(), //小时
		    			'm+': this.getMinutes(), //分
		    			's+': this.getSeconds(), //秒
		    			'q+': Math.floor((this.getMonth() + 3) / 3), //季度
		    			S: this.getMilliseconds() //毫秒
		    		};
		    		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
		    		for (var k in o)
		    			if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[
		    				k]).substr(('' + o[k]).length));
		    		return fmt;
		    	};
				
		    	for(let i=_this.braceletCurve_XTPL.length-7;i<_this.braceletCurve_XTPL.length;i++){ 
		    		
		    		LineC.series[0].data.push(_this.braceletCurve_XTPL[i].value);
		    	 }
		    	/* for(let j=0;j<(LineC.series[0].data).length;j++){
					 LineC.categories.push(j);
				 } */
				for(let i=_this.braceletCurve_XTPL.length-7;i<_this.braceletCurve_XTPL.length;i++){
					
					LineC.categories.push(new Date(_this.braceletCurve_XTPL[i].ts).Format('MM/dd mm:ss'));
				 }
		    	this.showLineC('canvasLineC', LineC);
		    },
		
		showLineC(canvasId, chartData) {
						var _self = this;
						canvaLineC = new uCharts({
							$this: _self,
							canvasId: canvasId,
							type: 'line',
					
							fontSize: 11,
							legend: {
								
								show: false,
								position: 'top',
								float: 'right',
								fontColor: '#242424',
								itemGap: '4',
								itemWidth: '3',
								fontSize:'13',
							},
							
							dataLabel: false,
							dataPointShape: false,/* 
							dataLabel:true, */
							background: '#242424',
							pixelRatio: _self.pixelRatio,
							categories: chartData.categories,
							series: chartData.series,
							animation: true,
							gridColor: '#2E2E2E',
							splitNumber: 5,
							gridType: 'solid',
							dashLength: 8,
							enableScroll: false,
							/* enableMarkLine:true, */
							xAxis: {
								rotateLabel:true,
								gridEval:3,
								scrollShow:false,
								scrollAlign:'left',
								disableGrid:false,
								axisLine:true,
								type: 'grid',
								disabled: false,
								gridColor: '#2E2E2E',
								fontColor: 'silver',
								gridType: 'solid',
								axisLineColor: '#2E2E2E',
								labelCount: 13,
								itemCount:10,
								scrollBackgroundColor:'#2E2E2E',
								scrollColor:'#bdbdbd',
							},
							yAxis: {
								gridColor: '#2D2D2D',
								gridType:'solid',
								splitNumber:8,
								showTitle:false,
								data: [{
									
										type: 'value',
										fontColor: 'silver',
										disabled: false, //y轴轴线
										min: 10,
										max: 180,
										position: 'left',
										axisLineColor: '#2E2E2E',
										title: this.unit,
										titleFontColor: '#BDBDBD',
										format: val => {
											return val.toFixed(0);
										}
									}
								],
								
								
							},
							width: _self.cWidth * _self.pixelRatio ,
							height: _self.cHeight * _self.pixelRatio ,
							extra: {
								line: {
									type: 'line',
									width: '1'
								}
							}
						});
					},
					
								touchLineC(e) {
									canvaLineC.showToolTip(e, {
										format: function(item, category) {
											return category + ' ' + item.name + ':' + item.data;
										}
									});
								},
								moveLineC(e) {
									canvaLineC.scroll(e);
								},
	},
	components: {
				MxDatePicker
			}, 
			
			}
</script>

<style>


	.horizontalSlider {
		white-space: nowrap;
		width: 100%;
		height: 350px;
		background-color: #242424;
		/* margin-top: 540px; */
	}
	.slide {
		margin-top: 6%;
		width: 900px;
		height: 350px;
		background-color: #242424;
	}
/* .qiun-charts {
		width: 100%;
		height: 700upx; 
	} */
.charts {
		position: absolute;
		width: 100%;
		height: 600upx;
		top: 1%;
	}
.timeSelector{
			position: absolute;
			text-align: center;
			width: 100%;
		}
button{
			margin: 20upx;
			font-size: 28upx;
		}
.All{
	width: 100%;
	height: 100%;
	background-color: #242424;
}
.heartbeatLabel{
	
	height: 139px;
	width: 100%;
	background-color: 'silver';
	display: flex;
	align-items: center;
	justify-content:space-around ;
	/* display: flex;
	justify-content: space-between; */
}
.heartbeat{
	height: 50px;
	width: 30%;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%) !important;
	/* width: 20%;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	
	font-size: 18px;
	color: #bdbdbd; */
	display: flex;
	justify-content:space-around ;
	align-items: center;
	
}
.zhiti{
	text-align: center;
	
	 /* margin-top: 12px; */
	 color: #BDBDBD;
}
.chooseTime{
	position: relative;
	width: 100%;
	height: 100px;
	/* background-color: 'silver' ; */
}
.graphHeartbeat{
	position: relative;
	width: 100%;
	height: 350px;
}
.titleC{
	margin-top: 3%;
	float: left;
}
.curveTitle{
	float: left;
	display: block;
	color: #BDBDBD;
	margin-left: 3%;
}
.curveTitle_1{
	float: right;
	display: block;
	color: #BDBDBD;
	margin-right: -9%;
	
}
.garden{
	width: 16px;
	height: 16px;
	border-radius: 50%;  
	-moz-border-radius: 50%;   
	-webkit-border-radius: 50%;
	float: right;
	margin-right: 8%;
	line-height: 16px;
	margin-top: 1%;
}
</style>