uni-zhks-app/pages/p-i-fan/p-i-fan.vue

<template>
	<view>
		<!-- top -->
		<view class="top">
			<image src="./icon/fan.png" mode=""></image>
			<view class="time">
				2019-10-22 星期二 11:01:32
			</view>
		</view>
		<!-- 风机运行状况 -->
		<p-i-f-section-1 :blower="blower">
			<canvas style="width: 632upx; height:500upx;" canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		</p-i-f-section-1>
		
		<!-- 风机参数 -->
		<p-i-f-section-2 :param1="param1" :param2="param2"></p-i-f-section-2>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaLineA=null;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				
				// 风机运行状态
				blower:{},
				// 风机参数
				param1:[],
				param2:[]
			}
		},
		onLoad() {
			// 获取风机运行状态
			this.getBlower()
			// 获取风机参数
			this.getParam1()
			this.getParam2()
			
			_self = this;
			this.cWidth=uni.upx2px(632);
			this.cHeight=uni.upx2px(500);
			// this.getServerData();
			this.getChartHour()
		},
		methods: {
			// 获取风机运行状态
			async getBlower(){
				const res = await this.$myRequest({
				    url: '/blower/status/now',
				})
				// console.log(res.data.data)
				this.blower = res.data.data
				console.log(this.blower)
			},
			
			// 获取风机运行参数
			async getParam1(){
				const res = await this.$myRequest({
					method:"POST",
					url: '/blower/param/now',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						num:1,
						
					}
				})
				console.log(res.data.data)
				this.param1 = res.data.data
			},
			async getParam2(){
				const res = await this.$myRequest({
					method:"POST",
					url: '/blower/param/now',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						num:2,
						
					}
				})
				console.log(res.data.data)
				this.param2 = res.data.data
			},
			
			
			
			// 获取风量趋势
			async getChartHour(){
				const res = await this.$myRequest({
				    url: '/blower/chart/hour',
				})
				
				
				let LineA = {
					categories: [],
					data:[]
				}
				// 时间存入新数组
				const categories = res.data.data
				categories.map(function(item,index){
					//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
					var sevm = {};
					//给每一项中的参数初始化并赋值
					sevm = item.time;
					//将项放进新的数组
					LineA.categories[index] = sevm
				})
				
				// console.log(LineA)
				// 存入新的series
				const data = res.data.data
				data.map(function(item,index){
					//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
					var sevm = {};
					//给每一项中的参数初始化并赋值
					sevm = item.tem;
					//将项放进新的数组
					LineA.data[index] = sevm
				})
				
				console.log(LineA)
				_self.showLineA("canvasLineA",LineA);
			},
			
			
			// getServerData(){
			// getChartHour(){
			// 	let LineA = {
			// 		categories: ['20:04', '20:15', '20:26', '20:38', '20:49'],
			// 		series: [{
			// 			name: '',
			// 			data: [12184.25,12196.61,12196.61,12233.72,12147.13],
			// 			color: '#1790FF'
			// 		}]
			// 	}
			// 	// console.log(LineA)
			// 	_self.showLineA("canvasLineA",LineA);
			// },
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:8,
					legend:{show:false},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: [{
						name: '',
						data: chartData.data,
						color: '#1790FF'
					}],
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		
		
		
		
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f3f3f3;
	}
	.top{
		position: relative;
		width: 750rpx;
		height: 458rpx;
		image{
			width: 750rpx;
			height: 458rpx;
		}
		.time{
			position: absolute;
			right: 40rpx;
			bottom: 50rpx;
		}
	}
	
</style>