sisMobilePhone/components/windFarmcard/WindFarmcard.vue

<template>
	<view>
		<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + plusDrawerList.windId+'&windStationName='+plusDrawerList.name)" v-if="plusDrawerList.windId!=0">
			<view class="windStationTitle">{{plusDrawerList.name}}</view>
			<view class="powerAndSpeedContainer">
				<view class="powerAndSpeedRed">
					预测发(万kwh):
					<span v-if="cardmodule"></span>
					<span v-if="cardmodule==false">{{index_windStation_cardmodule.ycdl}}</span>
				</view>
				<view class="powerAndSpeedRed">
					日发(万kwh):
					<span v-if="cardmodule"></span>
					<span v-if="cardmodule==false"> {{index_windStation_cardmodule.rfdl}}</span>
				</view>
				<view class="powerAndSpeedRed">
					实风速(m/s):
					<span v-if="cardmodule"></span>
					<span v-if="cardmodule==false"> {{ index_windStation_cardmodule.ssfs}}</span>
				</view>
				<view class="powerAndSpeedRed">
					实功率(万kw):
					<span v-if="cardmodule"></span>
					<span v-if="cardmodule==false"> {{ index_windStation_cardmodule.ssgl}}</span>
				</view>
			</view>
			<!-- HQChart图 -->
			<view class="UChartContainer">
				<view class="windStationUChart">
					<view class="windStationQiun-charts">
						<canvas :canvas-id=plusDrawerList.windId :id=plusDrawerList.windId class="windStationCharts" @touchstart="touchLineB3"></canvas>
					</view>
				</view>
				<view class="UChartTitle">风速功率曲线图</view>
			</view>
			<view class="fanStatusContainer">
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/001.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">接入&nbsp;&nbsp;0</span>
					<span v-if="module==false">接入&nbsp;&nbsp;{{ fdcstatusmodule.jr }}</span>
				</view>
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/002.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">待机&nbsp;&nbsp;0</span>
					<span v-if="module==false">待机&nbsp;&nbsp;{{ fdcstatusmodule.dj }}</span>
				</view>
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/003.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">运行&nbsp;&nbsp;0</span>
					<span v-if="module==false">运行&nbsp;&nbsp;{{ fdcstatusmodule.yx }}</span>
				</view>
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/004.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">故障&nbsp;&nbsp;0</span>
					<span v-if="module==false">故障&nbsp;&nbsp;{{ fdcstatusmodule.gz }}</span>
				</view>
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/005.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">维护&nbsp;&nbsp;0</span>
					<span v-if="module==false">维护&nbsp;&nbsp;{{ fdcstatusmodule.wh }}</span>
				</view>
				<view class="fanStatus">
					<view class="statusIcon">
						<image src="../../static/picture/006.png" style="width: 16px;height: 16px;margin-top: 7px;"></image>
					</view>
					<span v-if="module">离线&nbsp;&nbsp;0</span>
					<span v-if="module==false">离线&nbsp;&nbsp;{{ fdcstatusmodule.lx }}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../tools/u-charts/u-charts.js';

	var canvaLineB3 = null;
	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;
	};
	export default {
		data: function() {
			return {
				index_windStation_cardmodule: [],
				fdcstatusmodule:[],
				lineChartdata:[],
				userRights_FDC: [],
				cardmodule: true,
				module: true,
				windStationCardCWidth: '',
				windStationCardCHeight: '',
				windStationCardPixelRatio: 1,
				plusDrawerList: [],
				uchartTime:[],
			}
		},
		onLoad: function() {
			this.windStationCardCWidth = 250;
			this.windStationCardCHeight = 150;
		},

		methods: {
			getWindfieldid:function(plusDrawerList) {
				this.plusDrawerList = plusDrawerList;	
				console.log(this.plusDrawerList);
			},
			getWindfielddata:function(index_windStation_cardmodule){
				this.cardmodule = false;
				this.index_windStation_cardmodule = [];
 				this.index_windStation_cardmodule = index_windStation_cardmodule;
			},
			getHoursWeatherData: function(fdcstatusmodule) {
				this.module = false;
				this.fdcstatusmodule = fdcstatusmodule;
			},
			getUchartData:function(lineChartdata){
				this.lineChartdata = [];
				this.uchartTime = [];
				this.lineChartdata = lineChartdata;
				//console.log(this.lineChartdata)
				let _this = this;
				for(let i=0;i<_this.lineChartdata.length;i++){
					let time = new Date(
						_this.lineChartdata[i].time * 1000).Format('hh');
					_this.uchartTime.push(time);					
				}
			//	console.log(_this.uchartTime)
				_this.getLinAcharts();
			},
			getLinAcharts: function() {
				
				let LineC = {
					categories: [],
					series: [{
							name: '功率',
							data: [],
							color: '#4BB94B',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 0,
							legendShape: 'circle'
						},
						{
							name: '风速',
							data: [],
							color: '#E82E2F',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'm/s';
							},
							index: 1,
							legendShape: 'circle'
						},
						{
							name: '理论功率',
							data: [],
							color: '#F5A83C',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 0,
							legendShape: 'circle'
						},
						{
							name: '预测功率',
							data: [],
							color: '#4A80B1',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 1,
							legendShape: 'circle'
						}
					],
				};
				let _this = this;
				LineC.categories = [];
				LineC.series[0].data = [];
				LineC.series[1].data = [];
				LineC.series[2].data = [];
				LineC.series[3].data = [];
				//console.log( _this.lineChartdata)
				for (var i = 0; i < _this.lineChartdata.length; i++) {
					LineC.categories.push(_this.uchartTime[i]);
					// console.log(LineC.categories)
					LineC.series[0].data.push(
						_this.lineChartdata[i].value2
					);
					LineC.series[1].data.push(
						_this.lineChartdata[i].value4
					);
					LineC.series[2].data.push(
						_this.lineChartdata[i].value3
					);
					LineC.series[3].data.push(
						_this.lineChartdata[i].value1
					);
				}
				_this.showWindStationCardLineA3(_this.plusDrawerList.windId, LineC);
			},
			showWindStationCardLineA3(canvasId, chartData) {
				var _self = this;
				this.plusDrawerList.canvas = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: 'top',
						float: 'left',
						fontColor: 'silver',
						itemGap: '4',
						itemWidth: '3'
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.windStationCardPixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#2E2E2E',
						axisLineColor: '#2E2E2E',
						labelCount: '3'
						// itemCount:"3"
					},
					yAxis: {
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: false, //y轴轴线
								min: 0,
								max: 40,
								position: 'left',
								axisLineColor: '#2E2E2E',
								title: '         风速:(m/s)',
								titleFontColor: 'silver'
							},
							{
								fontColor: 'silver',
								disabled: false, //y轴轴线
								min: 0,
								max: 40,
								position: 'right',
								axisLineColor: '#2E2E2E',
								title: '功率:(kwh)',
								titleFontColor: 'silver'
							}
						],
						disabled: false,
						gridColor: '#2E2E2E',
						splitNumber: 4,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						format: val => {
							return val.toFixed(0) + '元';
						}
					},
					// width: _self.windStationCardCWidth * _self.windStationCardPixelRatio,
					// height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
					
					width: 240,
					height:150,
					padding: [10, 0, 0, 5], //画布填充边距，顺序为上右下左，同css，但必须4位
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			touchLineB3(e) {
				
				if(this.plusDrawerList.canvas.showToolTip!=undefined)
				{
					this.plusDrawerList.canvas.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data;
						}
					});
				}

			},
		}
	}
</script>

<style>
	page {
		/* background-color: #242424; */
	}

	.windStation {
		clear: both;
		width: calc(100% - 18%);
		margin-left: 9px;
		height: 350px;
		color: silver;
		margin-bottom: 0px;
		background-color: #242424;
	
	}

	.scrollWindStationCard {
		white-space: nowrap;
	}

	.windStationCard {
		width: 250px;
		height: 100%;
		margin-right: 9px;
		float: left;
		background-color: #242424;
	}

	.windStationCardContainer {
		width: 100%;
		height: 350px;
		margin-top: 10px;
	}

	.windStationTitle {
		width: 90%;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		margin-left: 5px;
	}

	.powerAndSpeedContainer {
		width: 100%;
		height: 90px;
	}

	.powerAndSpeedRed {
		margin-top: 8px;
		margin-left: 2%;
		margin-right: 2%;
		width: 46%;
		height: 37px;
		line-height: 37px;
		text-align: left;
		font-size: 12px;
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		border-radius: 5px;
		float: left;
	}

	.UChartContainer {
		width: 250px;
		height: 150px;
		margin-top: 8px;
	}

	.windStationUChart {
		width: 250px;
		height: 150px;
		position: absolute;
	}

	.windStationQiun-charts {
		width: 250px;
		height: 150px;
		background-color: #242424;
	}

	.windStationCharts {
		width: 250px;
		height: 150px;
		background-color: #242424;
	}

	.fanStatusContainer {
		width: 100%;
		height: 70px;
	}

	.fanStatus {
		width: 32%;
		height: 30px;
		margin-top: 5px;
		margin-right: 0.5%;
		margin-left: 0.5%;
		float: left;
	}

	.fanStatus {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
	}

	.statusIcon {
		width: 22px;
		height: 30px;
		margin-left: 3px;
		float: left;
	}
	.UChartTitle {
		position: relative;
		top: -2px;
		left: 2px;
		font-size: 12px;
		width: 100px;
	}
	
</style>