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;color: silver;">返回</view>
				</block>
				<block slot="content">
					<view style="color: silver;">{{ windStationName }}</view>
				</block>
			</cu-custom>
		</view>
		<!--电量卡片-->
		<view class="InformationCard" @tap="frameShow">
			<view class="informationCardAll">
				<view class="informationCardTextOne">
					<view class="informationCardText">
						<view class="textSilver">安全天数(&nbsp;天&nbsp;)&nbsp;:</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.aqts}}</view>
					</view>
					<view class="informationCardTextzj">
						<view class="textSilver">装机容量(MV):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.zjrl}}</view>
					</view>
				</view>
				<view class="informationCardTextTwo">
					<view class="informationCardTextNo1">
						<view class="textSilver">日发电量(kwh):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.rfdl}}</view>
					</view>
					<view class="informationCardText3">
						<view class="textSilver">预测发电量(kwh):</view>
						<view class="textWhite2">{{windpowerstationdetail.comprehensive_target.ycfdl}}</view>
					</view>
					<view class="informationCardText2">
						<view class="textSilver">上网电量(kwh):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.swdl}}</view>
						<view class="img"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 指标卡片 -->
		<view class="quatoCardAndFrame">
			<view class="quatoCardContainer" @tap="frameShow">
				<view :class="sanJiao"></view>

				<!-- <view class="icon cuIcon-unfold"></view> -->
			</view>
			<!-- 弹框 -->
			<view class="frame" v-show="isFrameShow">
				<view class="frameCardLeft">
					mttr(h):
					<a class="frameCardLeftValue"><view style="font-size: 12px;position: absolute;transform: scale(0.8);margin-left: -12.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.mttr}}</view></a>
				</view>
				<view class="frameCardMiddle">
					月利用小时(h):
					<a class="frameCardMiddleValue"><view style="font-size: 12px;position: absolute;transform: scale(0.8);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.ylyxs}}</view></a>
				</view>
				<view class="frameCardRight">
					综合场用电率(%):
					<a class="frameCardRightValue"><view style="font-size: 12px;position: absolute;transform: scale(0.8);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.zhcydl}}</view></a>
				</view>
				<view class="frameCardLeft">
					mtbf(h):
					<a class="frameCardLeftValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -12.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.mtbf}}</view></a>
				</view>
				<view class="frameCardMiddle">
					年利用小时(h):
					<a class="frameCardMiddleValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.nlyxs}}</view></a>
				</view>
				<view class="frameCardRight">
					设备可利用率(%):
					<a class="frameCardRightValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.sbklyl}}</view></a>
				</view>
				<view class="frameCardLeft">
					节约标煤(吨):
					<a class="frameCardLeftValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.jybm}}</view></a>
				</view>
				<view class="frameCardMiddle">
					节约用水(吨):
					<a class="frameCardMiddleValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.jyys}}</view></a>
				</view>
				<view class="frameCardRight">
					减排二氧化碳(吨):
					<a class="frameCardRightValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.jpeyht}}</view></a>
				</view>
				<view class="frameCardLeft">
					减排二氧化硫(吨):
					<a class="frameCardRightValue"><view style="font-size: 12px;position: absolute;transform: scale(0.80);margin-left: -5.5%;margin-top: 0.3%;">{{windpowerstationdetail.windpowerstationdetail_springbox_target.jpeyhl}}</view></a>
				</view>
			</view>
		</view>

		<!--风速卡片-->
		<view class="speedPower" @tap="closeFrame">
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					平均风速
					<span>(km/h)</span>
				</view>
				<view class="cardinstallnumbergreen">{{windspeedpowermodule.index_windSpeed_power_target_detail.pjfs}}</view>
				<view class="cardinstallnumbergreenmin">
					<view class="greenMinText">min: {{windspeedpowermodule.index_windSpeed_power_target_detail.pjfsMin}}</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: {{windspeedpowermodule.index_windSpeed_power_target_detail.pjfsMax}}</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					预测风速
					<span>(km/h)</span>
				</view>
				<view class="cardinstallnumbergreen">{{windspeedpowermodule.index_windSpeed_power_target_detail.ycfs}}</view>
				<view class="cardinstallnumbergreenmin">
					<view class="greenMinText">min: {{windspeedpowermodule.index_windSpeed_power_target_detail.ycfsMin}}</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: {{windspeedpowermodule.index_windSpeed_power_target_detail.ycfsMax}}</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					实际功率
					<span>(kw)</span>
				</view>
				<view class="cardinstallnumberred">{{windspeedpowermodule.index_windSpeed_power_target_detail.sjgl}}</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: {{windspeedpowermodule.index_windSpeed_power_target_detail.sjglMin}}</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: {{windspeedpowermodule.index_windSpeed_power_target_detail.sjglMax}}</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					理论功率
					<span>(kw)</span>
				</view>
				<view class="cardinstallnumberred">{{windspeedpowermodule.index_windSpeed_power_target_detail.llgl}}</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: {{windspeedpowermodule.index_windSpeed_power_target_detail.llglMax}}</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: {{windspeedpowermodule.index_windSpeed_power_target_detail.llglMin}}</view>
				</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="qiun-charts">
				<view class="PowerColunm">发电量柱状图</view>
				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll="true" @touchstart="touchColumn"
				 @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	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;
				};
	import uCharts from '../tools/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	var canvaColumn = null;
	export default {
		data: function() {
			return {
				FDC: "MHS_FDC",
				socketTask_comprehensive_target: '',
				socketTask_index_windSpeed_power_target_detail: '',
				socketTask_windpowerstationdetail_springbox_target: '',
				socketTask_windpowerstationdetail_twentyfourhourlinechart_target:'',
				socketTask_index_windStation_card:'',
				windpowerstationdetail: {
					comprehensive_target: "",
					windpowerstationdetail_springbox_target: ""
				},
				windspeedpowermodule:{
					index_windSpeed_power_target_detail:""
				},
				windspeedpowercurvedetail:{
					windpowerstationdetail_twentyfourhourlinechart_target:""
				},
				index_windStation_cardmodule:{
					index_windStation_cardmodule:""
				},
				gl:[],
				fs:[],
				llgl:[],
				ycgl:[],
				windStationName: '',
				isFrameShow: false,
				count: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				sanJiao: 'sanJiaoDown',

			};
		},
		onLoad(option) {
			this.windStationName = option.option;
			if(this.windStationName == '麻黄山'){
				this.FDC = 'MHS_FDC'
			};
			if(this.windStationName == '牛首山'){
				this.FDC = 'NSS_FDC'
			};
			if(this.windStationName == "石板泉"){
				this.FDC = 'SBQ_FDC'
			};
			if(this.windStationName == "香山"){
				this.FDC = 'XS_FDC'
			};
			if(this.windStationName == "青山"){
				this.FDC = 'QS_FDC'
			};
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(400);
			
			
			this.getServerData();
			this.getColumnServerData();
			this.comprehensive_target();
			this.windpowerstationdetail_springbox_target();
			this.index_windSpeed_power_target_detail();
			this.windpowerstationdetail_twentyfourhourlinechart_target();
		},
		computed: {
			backStageIp: function() {
				return this.$store.state.wholeSituationBackStageIp;
			},
			backStagePort: function() {
				return this.$store.state.wholeSituationBackStagePort;
			},
			windpowerstationNameToId: function() {
				return this.$store.state.windpowerstationNameToId;
			}
		},
		methods: {
			
			
			
			
			async comprehensive_target() {

				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_comprehensive_target = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_7/functionNumber_1',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_comprehensive_target.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_comprehensive_target.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windpowerstationdetail.comprehensive_target = JSON.parse(res.data)[_this.FDC];

					});
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				/* 			this.socketTask_comprehensive_target.onClose(() => {
									uni.request({
									    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
									    success: (res) => {
						
									    }
									});
							}) */
			},
			async windpowerstationdetail_springbox_target() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_windpowerstationdetail_springbox_target = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_7/functionNumber_2',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_windpowerstationdetail_springbox_target.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_windpowerstationdetail_springbox_target.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windpowerstationdetail.windpowerstationdetail_springbox_target = JSON.parse(res.data)[_this.FDC];

					});
				});
			},
			async index_windSpeed_power_target_detail() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_index_windSpeed_power_target_detail = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_7/functionNumber_3',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_index_windSpeed_power_target_detail.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;
			
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_windSpeed_power_target_detail.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windspeedpowermodule.index_windSpeed_power_target_detail = JSON.parse(res.data)[_this.FDC];
			
					});
				});
			},
			async windpowerstationdetail_twentyfourhourlinechart_target() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_windpowerstationdetail_twentyfourhourlinechart_target = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_7/functionNumber_4',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_windpowerstationdetail_twentyfourhourlinechart_target.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;
			
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_windpowerstationdetail_twentyfourhourlinechart_target.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windspeedpowercurvedetail.windpowerstationdetail_twentyfourhourlinechart_target = JSON.parse(res.data)[_this.FDC];
						_this.gl = _this.windspeedpowercurvedetail.windpowerstationdetail_twentyfourhourlinechart_target.gl;
						_this.fs = _this.windspeedpowercurvedetail.windpowerstationdetail_twentyfourhourlinechart_target.fs;
						_this.llgl = _this.windspeedpowercurvedetail.windpowerstationdetail_twentyfourhourlinechart_target.llgl;
						_this.ycgl = _this.windspeedpowercurvedetail.windpowerstationdetail_twentyfourhourlinechart_target.ycgl;
						_this.getServerData();
					});
				});
			},
			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'
						}
					]
				};
				let _this = this;
				LineA.categories = [];
				LineA.series[0].data = [];
				LineA.series[1].data = [];
				LineA.series[2].data = [];
				LineA.series[3].data = [];
				
				// for(let i=0;i<_this.gl.length;i++){
				// 	_this.gl[i].pointTime = new Date(_this.gl[i].pointTime*1000).Format("hh");
				// 	LineA.categories.push(_this.gl[i].pointTime);
				// 	LineA.series[1].data.push(_this.gl[i].pointValueInDouble);
				// 	console.log(_this.gl[i].pointValueInDouble)
				// };
				for(let i=0;i<_this.gl.length;i++){
					_this.gl[i].pointTime = new Date(_this.gl[i].pointTime*1000).Format("hh");
					// LineA.categories.push(_this.fs[i].pointTime);
					LineA.series[0].data.push(_this.gl[i].pointValueInDouble);
				}
				for(let i=0;i<_this.fs.length;i++){
						_this.fs[i].pointTime = new Date(_this.fs[i].pointTime*1000).Format("hh");
					    LineA.categories.push(_this.fs[i].pointTime);
						LineA.series[1].data.push(_this.fs[i].pointValueInDouble);
				}
				for(let i=0;i<_this.llgl.length;i++){
					_this.llgl[i].pointTime = new Date(_this.llgl[i].pointTime*1000).Format("hh");
					// LineA.categories.push(_this.ycgl[i].pointTime);
					LineA.series[2].data.push(_this.llgl[i].pointValueInDouble);
				}
				for(let i=0;i<_this.ycgl.length;i++){
					_this.ycgl[i].pointTime = new Date(_this.ycgl[i].pointTime*1000).Format("hh");
					// LineA.categories.push(_this.ycgl[i].pointTime);
					LineA.series[3].data.push(_this.ycgl[i].pointValueInDouble);
				}
				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: '#121212',
					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: false
						// 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/h)',
							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>
	.textSmail{
		font-size: 12px;
		transform: scale(0.80)
	}
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
		font-size: 20px;
		color: silver;
		background: #020202;
	}

	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../static/方正兰亭细黑_GBK.TTF);
	}

	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		color: silver;
	}

	.InformationCard {
		margin-top: 10px;
		width: 100%;
		height: 90px;
		background-color: #242424;
		float: left;
	}

	.informationCardAll {
		width: 100%;
		margin-top: 10px;
		height: 60px;
		float: left;
	}

	.informationCardTextOne {
		width: 100%;
		height: 35px;
		float: left;
	}

	.informationCardTextNo1 {
		margin-left: 2%;
		width: 115px;
		height: 35px;
		font-size: 13px;
		line-height: 35px;
		float: left;
	}

	.informationCardText {
		margin-left: 2%;
		width: 115px;
		height: 35px;
		line-height: 35px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		font-size: 13px;
		float: left;
	}

	.informationCardTextzj {
		/* margin-left: 43%; */
		width: 115px;
		height: 35px;
		line-height: 35px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		font-size: 13px;
		float: right;
		margin-right: 1%;
	}

	.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: 6%; */
		margin-left: calc(48% - 175px);
		width: 115px;
		height: 35px;
		font-size: 13px;
		line-height: 35px;
		float: left;
	}

	.informationCardText3 {
		/* margin-left: 6%; */
		margin-left: calc(48% - 175px);
		width: 120px;
		height: 35px;
		font-size: 13px;
		line-height: 35px;
		float: left;
	}

	.textWhite {
		color: white;
		float: left;
		width: 24px;
		text-align: right;
	}

	.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;
		margin-bottom: 10px;
	}

	.cardinstallredSpeed {
		margin-top: 8px;
		margin-left: 9px;
		width: 46%;
		height: 78px;
		background-color: #1f1f1f;
		/* 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: 80%;
		height: 25px;
		text-align: center;
		margin-left: 10%;
		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;
	}

	.cardinstalltitlegreen span {
		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: 80%;
		height: 25px;
		text-align: center;
		margin-left: 10%;
		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;
	}

	.cardinstalltitleRed span {
		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: 100%;
	height: 10px;
	background-color:red;
	position: relative;
} */
	/* .quatoCardContainer {
	width: 375px;
	height: 12px;
	background-color:blue;
} */
	.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: calc(100% - 18px);
		margin-left: 9px;
		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: #242424;
		border-top: 0.5px solid #242424;
	}

	.frameCardLeft {
		width: 34%;
		height: 10px;
		float: left;
		/* margin-right: 1.5%; */
		margin-bottom: 8px;
		/* text-align: center; */
		line-height: 30px;
		font-size: 13px;
		color: #a1a1a1;
		margin-top: 15px;
	}

	.frameCardLeftValue {
		float: right;
		color: #ffffff;
		margin-right: 25px;
		/* margin-left: 20px; */
	}
	
	.frameCardLeftValueSulfurdioxide{
		
	}
	.frameCardMiddleValue {
		float: right;
		color: #ffffff;
	}

	.frameCardRightValue {
		float: right;
		color: #ffffff;
	}

	.frameCardMiddle {
		width: 29%;
		height: 10px;
		float: left;
		/* margin-right: 1.5%; */
		margin-left: -5.5%;
		margin-bottom: 8px;
		/* text-align: center; */
		line-height: 30px;
		font-size: 13px;
		color: #a1a1a1;
		margin-top: 15px;
	}

	.frameCardRight {
		width: 34%;
		height: 10px;
		float: left;
		/* text-align: center; */
		line-height: 30px;
		margin-bottom: 8px;
		font-size: 13px;
		color: #a1a1a1;
		margin-left: 5.5%;
		margin-top: 15px;
	}

	.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: 400upx;
	}

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

	.lineChart {
		clear: both;
		width: 100%;
		height: 225px;
		background-color: #242424;
	}

	.Histogram {
		width: 100%;
		height: 225px;
		clear: both;
		background-color: #242424;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.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;
		position: relative;
		z-index: 20;
		/* overflow:auto; */
	}

	.img {
		width: 18px;
		height: 20px;
		float: right;
		background-color: #242424;
		/* background-color: red; */
		margin-top: -10px;
		margin-right: -10px;
		/* margin-top: -15px; */
		background-image: url(../../static/picture/zuizhongsanjiao2.png);
	}

	.value {
		color: #ffffff;
		font-size: 14px;
		float: right;
	}

	.rightValue {
		color: #ffffff;
		font-size: 14px;
		float: right;
	}

	.informationCardText4 {
		width: 120px;
		height: 35px;
		font-size: 14px;
		line-height: 35px;
		float: right;
		/* margin-left: 4px; */
		margin-right: 9px;
	}

	.textSilverDay {
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		float: left;
		font-size: 14px;
		margin-left: 2%;
	}
</style>