手环组件文件

components/bracelet/bracelet.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

components/bracelet/raceletDetails/heartbeatDetails.vue

@@ -0,0 +1,544 @@
+<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>

components/drawer/forecastThreeLineDrawer.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="container">
+		<!-- 抽屜 -->
+		<uni-drawer :visible="drawerIsShow" :width="width" @close="closeDrawer" style="z-index: 99999;">
+			<view style="padding:0rpx; background-color:#1A1A1A;">
+				<view class="picture">
+					<view class="sisGroup">预测功能分组
+					<view class="iconImgage">
+					</view>
+					</view>
+					
+					<view v-for="(item,index) in drawerList" :class="[changeGary==index?'statusMonitoring':'item']" :key="index" @click="clickChangeColor(index)">
+						<div v-if="(index==0)" @tap="goToIndex()">
+							{{item.name}}
+							</div>
+					<div v-if="(index==1)" @tap="common.navTo('/components/monitor/StatusMonitor')">
+						{{item.name}}
+						</div>
+						<div v-if="(index==2)" @tap="common.navTo('/components/monitor/MatrixMonitor')">
+							{{item.name}}
+							</div>
+							<div v-if="(index==3)" @tap="common.navTo('/components/monitor/WindMonitor')">
+								{{item.name}}
+								</div>
+								<div v-if="(index==4)" @tap="common.navTo('/components/monitor/PersonalMonitor')">
+									{{item.name}}
+									</div>
+					</view>
+
+				</view>
+				<view class="cu-bar tabbar bg-black">
+					<view class="action">
+						<view class="icon cuIcon-repair text-black">
+						</view>
+						<view class="text-black">设置</view>
+					</view>
+					<view class="action" style="margin-left: 30px;">
+						<view class="icon cuIcon-command text-black">
+						</view>
+						<view class="text-black">修改密码</view>
+					</view>
+				</view>
+			</view>
+		</uni-drawer>
+	</view>
+</template>
+
+<script>
+	import uniDrawer from "@/uni-drawer/uni-drawer.vue"
+	import uniList from '@/uni-list/uni-list.vue'
+	import uniListItem from '@/uni-list-item/uni-list-item.vue'
+	import uniIcons from '@/uni-icons/uni-icons.vue'
+	export default {
+		components: {
+			uniDrawer,
+			uniList,
+			uniListItem,
+			uniIcons
+		},
+		data: function() {
+			return {
+				drawerIsShow: false,
+				drawerList: [],
+				width: 250,
+				inconList: [],
+				changeGary: -1,
+			}
+		},
+		methods: {
+			openDrawer: function(width, drawerList, inconList) {
+				this.drawerIsShow = true;
+				this.drawerList = drawerList;
+				this.width = width;
+				this.inconList = inconList;
+			},
+			closeDrawer: function() {
+				this.drawerIsShow = false;
+			},
+			clickChangeColor: function(index) {
+				this.changeGary = index;
+			},
+			goToIndex:function(){
+				uni.switchTab({
+				     url: '/pages/index/Index'
+				    });
+			}
+		}
+	}
+</script>
+
+<style>
+	.container{
+		
+	}
+	.sisGroup {
+		width: 90%;
+		height: 65px;
+		color: silver;
+		font-size: 13px;
+		padding-top: 40px;
+		margin-left: 5%;
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		
+	}
+
+	.statusMonitoring {
+		background-color: #393939;
+		width: 90%;
+		margin-left: 5%;
+		height: 40px;
+		margin-top: 10px;
+		/* text-align: center; */
+		color: silver;
+		font-size: 14px;
+		padding-top: 10px;
+		padding-left: 10px;
+		font-family: Helvetica Neue, Helvetica, sans-serif;
+		
+		}
+
+	.picture {
+		width: 300px;
+		height: 700px;
+		background-color: #1A1A1A;
+		
+	}
+
+	.cu-bar {
+		position: fixed;
+		top: calc(100% - 50px);
+		width: 100%;
+		background-color: #1A1A1A;
+	}
+
+	.icon {
+		float: left;
+	}
+
+	.text-black {
+		float: left;
+		line-height: 28px;
+		font-size: 15px;
+		background-color: #1A1A1A;
+		color: silver;
+		
+	}
+	.iconImgage{
+		width: 29px;
+		height: 35px;
+		background-color: red;
+		margin-left: 82px;
+		margin-top: -25px;
+		background-image: url(../../static/picture/i.jpg);
+	}
+	.item {
+		width: 90%;
+		height: 40px;
+		margin-top: 10px;
+		margin-left: 5%;
+		/* float: right; */
+		/* margin-right: 10px; */
+		background-color: #272727;
+		/* text-align: center; */
+		color: silver;
+		font-size: 14px;
+		padding-top: 10px;
+		padding-left: 10px;
+		font-family: Helvetica Neue, Helvetica, sans-serif;
+	}
+</style>