sisMobilePhone/components/windStationCardDetail/WindStationCardDetail.vue

<template>
	<view>
		<!--导航栏-->
		<view  @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;">返回</view></block>
				<block slot="content">{{ windStationName }}</block>
			</cu-custom>
		</view>
		<!--电量卡片-->
		<view class="InformationCard" @tap="closeFrame">
			<view class="informationCardAll">
				<view class="informationCardTextOne">
					<view class="informationCardText">
						<view class="textSilver">安全天数</view>
						<view class="textWhite">(天)</view>
						:15
					</view>
					<view class="informationCardTextzj">
						<view class="textSilver">装机容量</view>
						<view class="textWhite">(MV)</view>
						:15
					</view>
				</view>
				<view class="informationCardTextTwo">
					<view class="informationCardText2">
						<view class="textSilver">日发电量</view>
						<view class="textWhite">(kwh)</view>
						:150
					</view>
					<view class="informationCardText2">
						<view class="textSilver">预测发电量</view>
						<view class="textWhite">(kwh)</view>
						:15
					</view>
					<view class="informationCardText2">
						<view class="textSilver">上网电量</view>
						<view class="textWhite">(kwh)</view>
						:15
					</view>
				</view>
			</view>
		</view>
		<!--风速卡片-->
		<view class="speedPower" @tap="closeFrame">
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					平均风速
					<view class="textWhitekuangSpeed">(km/h)</view>
				</view>
				<view class="cardinstallnumbergreen">5</view>
				<view class="cardinstallnumbergreenmin"><view class="greenMinText">min: 5</view></view>
				<view class="cardinstallnumbergreenmax"><view class="greenMaxText">max: 25</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					预测风速
					<view class="textWhitekuangSpeed">(km/h)</view>
				</view>
				<view class="cardinstallnumbergreen">48</view>
				<view class="cardinstallnumbergreenmin"><view class="greenMinText">min: 4</view></view>
				<view class="cardinstallnumbergreenmax"><view class="greenMaxText">max: 26</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					实际功率
					<view class="textWhitekuang">(kw)</view>
				</view>
				<view class="cardinstallnumberred">15</view>
				<view class="cardinstallnumberredmin"><view class="redMinText">min: 566</view></view>
				<view class="cardinstallnumberredmax"><view class="redMaxText">max: 656</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					理论功率
					<view class="textWhitekuang">(kw)</view>
				</view>
				<view class="cardinstallnumberred">14</view>
				<view class="cardinstallnumberredmin"><view class="redMinText">min: 589</view></view>
				<view class="cardinstallnumberredmax"><view class="redMaxText">max: 674</view></view>
			</view>
		</view>
		<!-- 指标卡片 -->
		<view class="quatoCardAndFrame">
			<view class="quatoCardContainer" @tap="frameShow">
				<!-- <view class="quatoCard">mttr</view>
				<view class="quatoCard">月利用小时</view>
				<view class="quatoCardLast">综合场用电率</view>
				<view class="quatoCard">mtbf</view>
				<view class="quatoCard">年利用小时</view>
				<view class="quatoCardLast">设备可利用率</view>
				<view class="quatoCard">减排二氧化硫</view>
				<view class="quatoCard">节约用水</view>
				<view class="quatoCardLast">减排二氧化碳</view>
				<view class="quatoCard">节约标煤</view> -->
				<view :class="sanJiao"></view>
			</view>
			<!-- 弹框 -->
			<view class="frame" v-show="isFrameShow">							
				<view class="frameCard">mttr(h):15</view>
				<view class="frameCard">月利用小时(h):15</view>
				<view class="frameCardLast">综合场用电率(%):15</view>
				<view class="frameCard">mtbf(h):15</view>
				<view class="frameCard">年利用小时(h):15</view>
				<view class="frameCardLast">设备可利用率(%):15</view>
				<view class="frameCard">减排二氧化硫(吨):15</view>
				<view class="frameCard">节约用水(吨):15</view>
				<view class="frameCardLast">减排二氧化碳(吨):15</view>
				<view class="frameCard">节约标煤(吨):15</view>
			</view>
		</view>
		<!-- 曲线图 -->
		<view class="lineChart" @tap="closeFrame">
			<view class="qiun-charts">
				<view class="speedPowerDiagram">风速功率曲线图</view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>
		<!--柱状图-->		
		<view class="Histogram" @tap="closeFrame">
		   <view class="PowerColunm">发电量柱状图</view>
		   <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
		</view>
	</view>
</template>

<script>
import uCharts from '../tools/u-charts/u-charts.js';
var _self;
var canvaLineA = null;
var canvaColumn = null;
export default {
	data: function() {
		return {
			windStationName: '',
			isFrameShow: false,
			count: 0,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			serverData: '',
			sanJiao:"sanJiaoDown"
		};
	},
	onLoad(option) {
		this.windStationName = option.option;

		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(400);
		this.getServerData();
		this.getColumnServerData();
	},
	methods: {
		frameShow: function() {
			this.count = this.count + 1;
			if (this.count % 2 == 0) {
				this.isFrameShow = false;
				this.sanJiao="sanJiaoDown";
			} else {
				this.isFrameShow = true;
				this.sanJiao="sanJiaoUp";
			}
		},
		closeFrame: function() {
			this.count = this.count + 1;
			if (this.isFrameShow) {
				this.isFrameShow = false;
				this.sanJiao="sanJiaoDown";
			}
		},
		getServerData() {
			// 折线图
			let LineA = {
				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: [
					{
						name: '功率',
						data: [11, 12, 14, 12, 13, 12, 16, 14, 11, 13, 10, 14, 11, 13, 11, 12, 11, 12.1, 12.2, 11.5, 11.7, 11.3, 12.7, 13, 12.8],
						color: '#4BB94B',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 0,
						legendShape: 'circle'
					},
					{
						name: '风速',
						data: [21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22.1, 22.2, 21.5, 21.7, 21.3, 22.7, 23, 22.8],
						color: '#E82E2F',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'km/h';
						},
						index: 1,
						legendShape: 'circle'
					},
					{
						name: '理论功率',
						data: [31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32.1, 32.2, 31.5, 31.7, 31.3, 32.7, 33, 32.8],
						color: '#F5A83C',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 0,
						legendShape: 'circle'
					},
					{
						name: '预测功率',
						data: [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2.1, 2.2, 1.5, 1.7, 1.3, 2.7, 3, 2.8],
						color: '#4A80B1',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 1,
						legendShape: 'circle'
					}
				]
			};

			this.showLineA('canvasLineA', LineA);
		},
		showLineA(canvasId, chartData) {
			var _self = this;
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
		
				fontSize: 11,
				legend: {
					show: true,
					position: 'top',
					float: 'right',
					fontColor: 'silver',
					itemGap: '4',
					itemWidth: '3'
				},
				dataLabel: false,
				dataPointShape: false,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					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: '         风速:(km/h)',
							titleFontColor: 'silver'
						},
						{
							fontColor: 'silver',
							disabled: false, //y轴轴线
							min: 0,
							max: 40,
							position: 'right',
							axisLineColor: '#2E2E2E',
							title: '功率:(kwh)',
							titleFontColor: 'silver'
						}
					],
		
					gridColor: '#2E2E2E',
					splitNumber: 4,
					gridType: 'solid',
					dashLength: 8,
					showTitle: 'true',
					format: val => {
						return val.toFixed(0) + '元';
					}
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					line: {
						type: 'line',
						width: '1'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		moveLineA(e) {
			canvaLineA.scroll(e);
		},
		getColumnServerData() {
			let Column={
			    "categories": ['0',
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'10',
					'11',
					'12',
					'13',
					'14',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24'],
			    "series": [{
					"legendShape": "circle",
					"name": "发电量",
					"data": [10, 20, 30, 40, 20, 15,20,10, 20, 30, 40, 20, 15,20,10, 20, 30, 40, 20, 15,20,20, 15,20,10],
					"textColor":"#ffffff",
					"color": "#2fc25b"
			      }]
			    }
			// res.data.data = res.data;
			// let Column = {
			// 	categories: [],
			// 	series: []
			// };
			// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			// Column.categories = res.data.data.ColumnB.categories;
			// Column.series = res.data.data.ColumnB.series;
			// _self.textarea = JSON.stringify(res.data.data.ColumnB);
			this.showColumn("canvasColumn", Column);	
		},			
		showColumn(canvasId, chartData) {
			var _self = this;
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				legend: {
					show: true,
					fontSize: 12,
					padding: 5,
					fontColor: "silver",
					itemGap: "4",
					// margin:0,
					position: "top",
					float: "right"
				},
				fontSize: 11,
				background: '#242424',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				enableScroll:true,
				xAxis: {
					// disabled:true,
					rotateLabel: false,
					disableGrid: true,
					axisLineColor: '#2D2D2D',
					fontColor: "#ffffff",
					itemCount:10,
					// labelCount:10,
					scrollShow:true,
					// gridColor:'#2D2D2D',
				},
				yAxis: {
					showTitle: true,
					// disableGrid:true,
					gridType: 'solid',
					dashLength: 8,
					gridColor: '#2D2D2D',
					splitNumber: 5,
					min: 0,
					max: 40,
					data: [{
						min: 0,
						max: 40,
						position: 'left',
						axisLine: false,
						fontColor: "silver",
						title: "       发电量:(kw)",
						titleFontColor: "silver",
						titleFontSize: 11,
						format: (val) => {
							return val.toFixed(0) + ''
						},
					}]
				},
				dataLabel: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						width: 12,
						lineStyle: {
							width: 5,
						}
					}
				}
			});
				
		},			
		touchEndColumn(e) {
			canvaColumn.scrollEnd(e);
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					if (typeof item.data === 'object') {
						return category + ' ' + item.name + ':' + item.data.value
					} else {
						return category + ' ' + item.name + ':' + item.data
					}
				}
			});
		},
		touchColumn(e){
		    canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
		    canvaColumn.scroll(e);
		},		
		
	}
};
</script>

<style>
body {
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
	font-size: 20px;
	color: silver;
	background: #000;
}

page {
	background-color: #1f1f1f;
	color: silver;
}
.InformationCard {
	margin-top: 10px;
	width: 100%;
	height: 70px;
	background-color: #242424;
	float: left;
}
.informationCardAll {
	width: 100%;
	margin-top: 10px;
	height: 60px;
	float: left;
}
.informationCardTextOne {
	width: 100%;
	height: 35px;
	float: left;
}
.informationCardText {
	margin-left: 15px;
	width: 110px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: left;
}
.informationCardTextzj {
	margin-left: 141px;
	width: 100px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: left;
}
.informationCardTextTwo {
	width: 100%;
	height: 35px;
	float: left;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
}
.informationCardText2 {
	margin-left: 15px;
	width: 110px;
	height: 35px;
	font-size: 12px;
	line-height: 35px;
	float: left;
}
.textWhite {
	color: white;
	float: left;
}
.textSilver {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
}
.speedPower {
	width: 100%;
	height: 180px;
	background-color: #242424;
	float: left;
	margin-top: 20rpx;
}
.cardinstallredSpeed {
	margin-top: 8px;
	margin-left: 9px;
	width: 46%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	border-radius: 5px;
	float: left;
}
.cardinstalltitlegreen {
	width: 100%;
	height: 25px;
	margin-left: 37px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 14px;
	color: silver;
	line-height: 25px;
	float: left;
}
.textWhitekuangSpeed {
	color: white;
	float: right;
	margin-right: 70px;
}
.cardinstallnumbergreen {
	width: 100%;
	height: 25px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 20px;
	color: silver;
	/* color: #449618; */
	line-height: 25px;
	float: left;
}
.cardinstallnumbergreenmin {
	margin-left: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #449618; */
	float: left;
}
.cardinstallnumbergreenmax {
	/* font-weight: bold; */
	margin-right: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #449618; */
	float: right;
}
.greenMinText {
	line-height: 20px;
	float: right;
}
.greenMaxText {
	line-height: 20px;
	float: left;
}
.cardinstalltitleRed {
	width: 100%;
	height: 25px;
	margin-left: 45px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 14px;
	color: silver;
	line-height: 25px;
	float: left;
}
.textWhitekuang {
	color: white;
	float: right;
	margin-right: 85px;
}
.cardinstallnumberred {
	width: 100%;
	height: 25px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 20px;
	color: silver;
	/* color: #E93131; */
	line-height: 25px;
	float: left;
}
.cardinstallnumberredmin {
	margin-left: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #E93131; */
	float: left;
}
.cardinstallnumberredmax {
	margin-right: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #E93131; */
	float: right;
}
.redMinText {
	line-height: 20px;
	float: right;
}
.redMaxText {
	line-height: 20px;
	float: left;
}
.quatoCardAndFrame {
	clear: both;
	width: calc(100% - 18px);
	height: 20px;
	margin-left: 9px;
	background-color: #242424;
	position: relative;
}
.quatoCardContainer {
	width: 100%;
	height: 20px;
	/* margin-left: 9px; */
	background-color: #242424;
}
.quatoCard {
	width: 32%;
	height: 30px;
	float: left;
	margin-right: 1.5%;
	margin-bottom: 8px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
}
.quatoCardLast {
	width: 32%;
	height: 30px;
	float: left;
	text-align: center;
	line-height: 30px;
	margin-bottom: 8px;
	font-size: 14px;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
}
.sanJiaoUp {
	clear: both;
	width: 0;
	height: 0;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-bottom: 15px solid #E47369;
	margin-left: calc(50% - 20px);
}
.sanJiaoDown {
	clear: both;
	width: 0;
	height: 0;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-top: 15px solid #E47369;
	margin-left: calc(50% - 20px);
}
.frame {
	width: 100%;
	height: 150px;
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 20;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	background-color:#262424;
}
.frameCard{
	width: 32%;
	height: 30px;
	float: left;
	margin-right: 1.5%;
	margin-bottom: 8px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	color: white;
}
.frameCardLast{
	width: 32%;
	height: 30px;
	float: left;
	text-align: center;
	line-height: 30px;
	margin-bottom: 8px;
	font-size: 12px;
	color: white;
}
.speedPowerDiagram {
	clear: both;
	width: 130px;
	height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
	margin-top: 18px;
	margin-left: 9px;
	font-size: 11px;
}
.qiun-charts {
	width: 750upx;
	height: 500upx;
}

.charts {
	width: 750upx;
	height: 500upx;
}

.lineChart {
	width: 100%;
	height: 200px;
	background-color: #242424;
	margin-top: 10px;
	float: left;
}
.Histogram {
	clear: both;
	width: 750upx;
	height: 500upx;
	margin-top: 20px;
	background-color: #242424;
}
.PowerColunm {
  width: 130px;
  height: 30px;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  color: silver;
  float: left;
  margin-top: 18px;
  margin-left: 10px;
  font-size: 11px;
 }
</style>