sisMobilePhone/pages/index/Index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="threeLine" @tap="openDrawer">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
			</view>
			<view class="text">
				<view class="notice">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
						<view class="cu-tag looknumber">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				宁夏新能源公司
			</view>
			<view class="plus">+</view>
		</view>
		<!-- 抽屉组件 -->
		<div><drawer ref="drawer"></drawer></div>
		<!--时间组件-->
		<view class="time">
			<view class="timeimageshizhong"><image src="../../static/picture/dafeng.png" style="width: 20px;height: 20px;margin-left: 10px;"></image></view>
			<view class="timeText">推荐时间：2020年4月15日ㅤ19:31</view>
			<view class="timeIcon"><image src="../../static/picture/qingwhite.png" style="width: 25px;height: 25px;margin-left: 54px;"></image></view>
		</view>
		<!--电量卡片-->
		<view class="InformationCard">
			<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">
			<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="interfaceCard">
			<view class="interfaceCardSmallTop">
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/001.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">接入</view>
					<view class="AccessCardNumber">59</view>
				</view>
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/002.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">运行</view>
					<view class="AccessCardNumber">29</view>
				</view>
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/003.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">故障</view>
					<view class="AccessCardNumber">18</view>
				</view>
			</view>
			<view class="interfaceCardSmallTop">
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/004.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">待机</view>
					<view class="AccessCardNumber">10</view>
				</view>
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/005.png" style="width: 18px;height:18px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">维护</view>
					<view class="AccessCardNumber">8</view>
				</view>
				<view class="interfaceCardSmall">
					<view class="AccessCardimage"><image src="../../static/picture/006.png" style="width: 18px;height:19px;margin-top: 9px;margin-left: 7px;"></image></view>
					<view class="AccessCardText">离线</view>
					<view class="AccessCardNumber">8</view>
				</view>
			</view>
		</view>
		<!--进度条-->
		<view class="progressBar">
			<view class="progressBarAll">
				<view class="progressBarOne">
					<view class="progressBarLeft"><view class="progressBarLeftText">35kwh</view></view>
					<view class="progressBarText">月计划发电量进度条</view>
					<view class="progressBarRight"><view class="progressBarRightText">100kwh</view></view>
				</view>
				<view class="cu-progress round radius striped active">
					<view class="bg-olive" :style="[{ width: loading ? '61.8%' : '' }]"></view>
					<view class="bg-angrey" :style="[{ width: loading ? '38.2%' : '' }]"></view>
				</view>
			</view>
			<view class="progressBarAll">
				<view class="progressBarOne">
					<view class="progressBarLeft"><view class="progressBarLeftText">135kwh</view></view>
					<view class="progressBarText">年计划发电量进度条</view>
					<view class="progressBarRight"><view class="progressBarRightText">200kwh</view></view>
				</view>
				<view class="cu-progress round radius striped active">
					<view class="bg-olive" :style="[{ width: loading ? '70%' : '' }]"></view>
					<view class="bg-angrey" :style="[{ width: loading ? '30%' : '' }]"></view>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="horizontalSlider">
			<view class="slide">
				<view class="monthlyUtilizationHours">月利用小时（h）：13</view>
				<view class="yearlyUtilizationHours">年利用小时（h）：13</view>
				<view class="comprehensiveServicePowerConsumptionRate">综合厂用电率(%)：20</view>
				<view class="equipmentAvailability">设备可利用率(%)：90</view>
				<view class="sulfurDioxideEmissionReduction">减排二氧化硫(吨)：21</view>
				<view class="carbonDioxideReduction">减排二氧化碳(吨)：5</view>
				<view class="waterSaving">节约用水(吨)：15</view>
				<view class="saveStandardCoal">节约标煤(吨)：35</view>
				<view class="mttr">mttr(h)：22</view>
				<view class="mtbf">mtbf(h)：24</view>
			</view>
		</scroll-view>
		<!--折线图-->
		<view class="lineChart">
			<view class="qiun-charts">
				<view class="speedPowerDiagram">风速功率曲线图</view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>
		<!-- 柱状图 -->
		<view class="Histogram">
			<view class="qiun-charts"><canvas canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts" @touchstart="touchColumn"></canvas></view>
		</view>
		<!-- 风电场卡片 -->
		<view class="windStation">
			<scroll-view scroll-x class="scrollWindStationCard">
				<view class="windStationCardContainer">
					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '麻黄山')">
						<view class="windStationTitle">麻黄山风电场</view>
						<view class="powerAndSpeedContainer">
							<view class="powerAndSpeedRed">
								预测电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								日发电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实时风速
								<span>(km/h)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实际功率
								<span>(km/h)</span>
								:15
							</view>
						</view>
						<!-- HQChart图 -->
						<!-- <view class="HQChart">
									<div class="divchart" ref="divchart"><div id="minute" style="width: 250px; height: 100px;" ref="minute"></div></div>
								</view> -->
						<view class="UChartContainer">
							<view class="windStationUChart">
								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineA" id="windStationCanvasLineA" class="windStationCharts"></canvas></view>
							</view>
							<view class="UChartTitle">风速功率曲线图</view>
							<!-- <view class="xTime">时间</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>接入&nbsp;&nbsp;99</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>运行&nbsp;&nbsp;99</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>故障&nbsp;&nbsp;99</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>待机&nbsp;&nbsp;99</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>维护&nbsp;&nbsp;99</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>离线&nbsp;&nbsp;99</span>
							</view>
						</view>
					</view>

					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '牛首山')">
						<view class="windStationTitle">牛首山风电场</view>
						<view class="powerAndSpeedContainer">
							<view class="powerAndSpeedRed">
								预测电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								日发电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实时风速
								<span>(km/h)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实际功率
								<span>(km/h)</span>
								:15
							</view>
						</view>
						<!-- HQChart图 -->
						<!-- <view class="HQChart">
									<div class="divchart" ref="divchart"><div id="minute" style="width: 250px; height: 100px;" ref="minute"></div></div>
								</view> -->
						<view class="UChartContainer">
							<view class="windStationUChart">
								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineB" id="windStationCanvasLineB" class="windStationCharts"></canvas></view>
							</view>
							<view class="UChartTitle">风速功率曲线图</view>
							<!-- <view class="xTime">时间</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>接入&nbsp;&nbsp;99</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>运行&nbsp;&nbsp;99</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>故障&nbsp;&nbsp;99</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>待机&nbsp;&nbsp;99</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>维护&nbsp;&nbsp;99</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>离线&nbsp;&nbsp;99</span>
							</view>
						</view>
					</view>

					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '石板泉')">
						<view class="windStationTitle">石板泉风电场</view>
						<view class="powerAndSpeedContainer">
							<view class="powerAndSpeedRed">
								预测电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								日发电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实时风速
								<span>(km/h)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实际功率
								<span>(km/h)</span>
								:15
							</view>
						</view>
						<!-- HQChart图 -->
						<!-- <view class="HQChart">
									<div class="divchart" ref="divchart"><div id="minute" style="width: 250px; height: 100px;" ref="minute"></div></div>
								</view> -->
						<view class="UChartContainer">
							<view class="windStationUChart">
								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineC" id="windStationCanvasLineC" class="windStationCharts"></canvas></view>
							</view>
							<view class="UChartTitle">风速功率曲线图</view>
							<!-- <view class="xTime">时间</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>接入&nbsp;&nbsp;99</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>运行&nbsp;&nbsp;99</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>故障&nbsp;&nbsp;99</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>待机&nbsp;&nbsp;99</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>维护&nbsp;&nbsp;99</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>离线&nbsp;&nbsp;99</span>
							</view>
						</view>
					</view>

					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '青山')">
						<view class="windStationTitle">青山风电场</view>
						<view class="powerAndSpeedContainer">
							<view class="powerAndSpeedRed">
								预测电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								日发电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实时风速
								<span>(km/h)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实际功率
								<span>(km/h)</span>
								:15
							</view>
						</view>
						<!-- HQChart图 -->
						<!-- <view class="HQChart">
									<div class="divchart" ref="divchart"><div id="minute" style="width: 250px; height: 100px;" ref="minute"></div></div>
								</view> -->
						<view class="UChartContainer">
							<view class="windStationUChart">
								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineD" id="windStationCanvasLineD" class="windStationCharts"></canvas></view>
							</view>
							<view class="UChartTitle">风速功率曲线图</view>
							<!-- <view class="xTime">时间</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>接入&nbsp;&nbsp;99</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>运行&nbsp;&nbsp;99</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>故障&nbsp;&nbsp;99</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>待机&nbsp;&nbsp;99</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>维护&nbsp;&nbsp;99</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>离线&nbsp;&nbsp;99</span>
							</view>
						</view>
					</view>

					<view class="windStationCard" @tap="common.navTo('/components/windStationCardDetail/WindStationCardDetail?option=' + '香山')">
						<view class="windStationTitle">香山风电场</view>
						<view class="powerAndSpeedContainer">
							<view class="powerAndSpeedRed">
								预测电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								日发电量
								<span>(kwh)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实时风速
								<span>(km/h)</span>
								:15
							</view>
							<view class="powerAndSpeedRed">
								实际功率
								<span>(km/h)</span>
								:15
							</view>
						</view>
						<!-- HQChart图 -->
						<!-- <view class="HQChart">
									<div class="divchart" ref="divchart"><div id="minute" style="width: 250px; height: 100px;" ref="minute"></div></div>
								</view> -->
						<view class="UChartContainer">
							<view class="windStationUChart">
								<view class="windStationQiun-charts"><canvas canvas-id="windStationCanvasLineE" id="windStationCanvasLineE" class="windStationCharts"></canvas></view>
							</view>
							<view class="UChartTitle">风速功率曲线图</view>
							<!-- <view class="xTime">时间</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>接入&nbsp;&nbsp;99</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>运行&nbsp;&nbsp;99</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>故障&nbsp;&nbsp;99</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>待机&nbsp;&nbsp;99</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>维护&nbsp;&nbsp;99</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>离线&nbsp;&nbsp;99</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import drawer from '../../components/drawer/threeLineDrawer.vue';
import uCharts from '../../components/tools/u-charts/u-charts.js';
var _self;
var canvaLineA = null;
var canvaColumn = null;
var canvaLineB = null;
export default {
	components: {
		drawer: drawer
	},
	data: function() {
		return {
			badge: 22,
			drawerList: ['状态监视', '矩阵监视', '风场监视', '人员监视'],
			inconList: ['form', 'favor', 'question', 'edit'],
			minaverageSpeed: '12',
			maxaverageSpeed: '25',
			loading: false,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			serverData: '',
			windStationCardCWidth: '',
			windStationCardCHeight: '',
			windStationCardPixelRatio: 1
		};
	},

	onLoad: function() {
		let that = this;
		setTimeout(function() {
			that.loading = true;
		}, 500);
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(400);
		this.getServerData();
		this.getColumnData();
		this.windStationCardCWidth = 250;
		this.windStationCardCHeight = 150;
		this.getWindStationCardData();
	},

	methods: {
		openDrawer: function() {
			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
		},
		closeDrawer: function() {
			this.drawerIsShow = false;
		},
		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'
					}
				}
			});
		},
		getColumnData() {
			let ColumnStack = {
				categories: ['04/12', '04/13', '04/14', '04/15', '04/16', '04/17', '04/18', '04/19', '04/20'],
				series: [
					{
						name: '类别一',
						data: [18, 13, 12, 17, 13, 7, 11, 15, 13]
					},
					{
						name: '类别二',
						data: [17, 15, 17, 21, 6, 8, 10, 17, 11]
					},
					{
						name: '类别三',
						data: [14, 17, 19, 20, 6, 4, 12, 4, 5]
					},
					{
						name: '类别三',
						data: [14, 17, 19, 20, 6, 4, 12, 4, 5]
					},
					{
						name: '类别三',
						data: [14, 17, 19, 20, 6, 4, 12, 4, 5]
					}
				]
			};
			this.showColumnStack('canvasColumnStack', ColumnStack);
		},
		showColumnStack(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				legend: {
					show: false
				},
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: [
						{
							type: 'value',
							fontColor: 'silver',
							disabled: false, //y轴轴线
							min: 0,
							max: 60,
							position: 'left',
							axisLineColor: '#2E2E2E',
							title: '         风速:(km/h)',
							titleFontColor: 'silver'
						}
					],
					gridColor: '#2E2E2E',
					splitNumber: 4,
					gridType: 'solid',
					dashLength: 8,
					showTitle: 'true'
					//disabled:true
				},
				dataLabel: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'stack',
						width: (_self.cWidth * _self.pixelRatio * 0.5) / chartData.categories.length
					}
				}
			});
		},
		touchColumn(e) {
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		moveLineA(e) {
			canvaLineA.scroll(e);
		},
		getWindStationCardData: function() {
			let LineA1 = {
				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 LineB = {
				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 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: [
					{
						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 LineD = {
				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 LineE = {
				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.showWindStationCardLineA('windStationCanvasLineA', LineA1);
			this.showWindStationCardLineA('windStationCanvasLineB', LineB);
			this.showWindStationCardLineA('windStationCanvasLineC', LineC);
			this.showWindStationCardLineA('windStationCanvasLineD', LineD);
			this.showWindStationCardLineA('windStationCanvasLineE', LineE);
		},
		showWindStationCardLineA(canvasId, chartData) {
			var _self = this;
			canvaLineB = 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.windStationCardPixelRatio,
				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.windStationCardCWidth * _self.windStationCardPixelRatio,
				height: _self.windStationCardCHeight * _self.windStationCardPixelRatio,
				extra: {
					line: {
						type: 'line',
						width: '1'
					}
				}
			});
		},
	}
};
</script>

<style>
.speedPowerDiagram {
	width: 100px;
	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;
}
.monthlyUtilizationHours {
	width: 160px;
	height: 30px;
	margin-top: 20px;
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 20px;
	text-align: center;
	padding-top: 5px;
}
.yearlyUtilizationHours {
	width: 160px;
	height: 30px;
	margin-top: 10px;
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 20px;
	text-align: center;
	padding-top: 5px;
}
.comprehensiveServicePowerConsumptionRate {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 200px;
	margin-top: -70px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.equipmentAvailability {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 200px;
	margin-top: -30px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.sulfurDioxideEmissionReduction {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 380px;
	margin-top: -70px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.carbonDioxideReduction {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 380px;
	margin-top: -30px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.waterSaving {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 560px;
	margin-top: -70px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.saveStandardCoal {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 560px;
	margin-top: -30px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.mttr {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 740px;
	margin-top: -70px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.mtbf {
	width: 160px;
	height: 30px;
	/* margin-top: 10px; */
	/* background-color: #161616; */
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	color: silver;
	margin-left: 740px;
	margin-top: -30px;
	text-align: center;
	padding-top: 5px;
	float: left;
}
.horizontalSlider {
	white-space: nowrap;
	width: 100%;
	height: 100px;
	background-color: #242424;
	margin-top: 540px;
}
.slide {
	width: 920px;
	height: 100px;
	background-color: #242424;
}
.qiun-charts {
	width: 750upx;
	height: 500upx;
}

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

.uchartTitle {
	position: absolute;
	left: 9px;
	top: 605px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
}

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

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

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;
	overflow-x: hidden;
}

.top {
	width: 100%;
	height: 95upx;
	padding-top: 5upx;
	background-color: #1f1f1f;
}

.threeLine {
	width: 50px;
	height: 45px;
	float: left;
}

.text {
	width: calc(100% - 100px);
	height: 45px;
	float: left;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	line-height: 45px;
	text-align: center;
	font-size: 18px;
}

.notice {
	width: 50px;
	height: 45px;
	float: left;
}

.plus {
	width: 50px;
	height: 45px;
	float: right;
	color: white;
	font-size: 35px;
	line-height: 45px;
	text-align: center;
}

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

.timeimageshizhong {
	width: 30px;
	height: 20px;
	margin-top: 5px;
	float: left;
}

.timeText {
	width: 62%;
	height: 30px;
	float: left;
	line-height: 30px;
	font-size: 15px;
	margin-left: 15px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
}

.timeIcon {
	width: 21%;
	height: 30px;
	float: left;
	margin-left: 5px;
}

.timeIconImage {
	width: 100%;
	height: 25px;
	margin-top: 1px;
}

.timeIconText {
	width: 100%;
	height: 25px;
	text-align: center;
	font-size: 12px;
}

.cardinstallgreenSecurity {
	margin-left: 9px;
	margin-top: 9px;
	margin-bottom: 9px;
	width: 30%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1) 0%, rgba(66, 130, 61, 0.2) 100%);
	border-radius: 5px;
	float: left;
	/* font-family: "STKaiti"; */
}

.cardinstalltitle {
	width: 100%;
	height: 40px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 14px;
	color: silver;
	line-height: 40px;
	float: left;
}

.cardinstallnumber {
	/* font-weight: bold; */
	width: 100%;
	height: 40px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 16px;
	/* color: #449618; */
	line-height: 40px;
}

.cardinstallgreenEquipment {
	margin-right: 11px;
	margin-top: 10px;
	width: 30%;
	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: right;
	/* font-family: "STKaiti"; */
}

.cardinstallgreen {
	margin-left: 9px;
	width: 30%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1) 0%, rgba(66, 130, 61, 0.2) 100%);
	border-radius: 5px;
	float: left;
}

.cardinstallblue {
	margin-top: 9px;
	margin-left: 9px;
	width: 30%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(10, 82, 156, 0.2) 100%);
	border-radius: 5px;
	float: left;
}

.cardinstallblueright {
	margin-right: 11px;
	margin-top: 10px;
	width: 30%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(10, 82, 156, 0.2) 100%);
	border-radius: 5px;
	float: right;
}

.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;
}

.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;
}

.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;
}

.electricityCard {
	width: 100%;
	height: 100px;
	background-color: #242424;
	/* height: 185px; */
	float: left;
	margin-top: 20rpx;
}

.speedPower {
	width: 100%;
	height: 180px;
	background-color: #242424;
	float: left;
	margin-top: 20rpx;
}

.cardinstallgreenSpeed {
	margin-top: 9px;
	margin-left: 9px;
	width: 46%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(133, 145, 132, 0.1) 0%, rgba(66, 130, 61, 0.2) 100%);
	border-radius: 5px;
	float: left;
}

.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;
}

.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;
}

.textWhitekuangSpeed {
	color: white;
	float: right;
	margin-right: 70px;
}

.textWhitekuang {
	color: white;
	float: right;
	margin-right: 85px;
}

.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;
}

.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;
}

.AccessCardNumber {
	width: 30%;
	height: 35px;
	float: left;
	line-height: 35px;
	text-align: center;
	font-size: 12px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
}

.AccessCardText {
	width: 30%;
	height: 35px;
	float: left;
	line-height: 35px;
	text-align: center;
	font-size: 12px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
}

.AccessCardimage {
	margin-left: 5px;
	width: 30%;
	height: 35px;
	float: left;
}

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

.interfaceCardSmallTop {
	margin-top: 5px;
	width: 100%;
	height: 35px;
	float: left;
}

.interfaceCardSmall {
	margin-left: 8px;
	width: 30%;
	height: 35px;
	float: left;
}

.progressBarLeftText {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: left;
	margin-left: 5px;
}

.progressBarRightText {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: right;
	margin-right: 5px;
}

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

.progressBarAll {
	margin-left: 9px;
	width: 355px;
	height: 60px;
	float: left;
}

.progressBarText {
	text-align: center;
	width: 50%;
	height: 30px;
	line-height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: left;
}

.progressBarOne {
	width: 100%;
	height: 30px;
	float: left;
}

.progressBarLeft {
	width: 25%;
	height: 30px;
	line-height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	float: left;
}

.progressBarRight {
	width: 25%;
	height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 12px;
	line-height: 30px;
	float: right;
}
/* 风电场卡片css */
.windStation {
	clear: both;
	width: calc(100% - 18px);
	margin-left: 9px;
	height: 300px;
	color: silver;
	/* background-color: #242424; */
}
.scrollWindStationCard {
	white-space: nowrap;
}
.windStationCardContainer {
	width: 1295px;
	height: 350px;
}
.windStationCard {
	width: 250px;
	height: 100%;
	margin-right: 9px;
	float: left;
	background-color: #242424;
}
.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: center;
	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;
}
.powerAndSpeedRed span {
	color: white;
}
.HQChart {
	width: 100%;
	height: 100px;
	margin-top: 8px;
}
.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;
}
.UChartTitle{
	position: relative;
	top: -2px;
	left:2px;
	font-size: 12px;
	width: 100px;
}
.xTime{
	position: relative;
	top: 90px;
	left:222px;
	font-size: 8px;
	width: 30px;
}
.fanStatusContainer {
	width: 100%;
	height: 70px;
}
.fanStatus {
	width: 32%;
	height: 30px;
	margin-top: 5px;
	margin-right: 0.5%;
	margin-left: 0.5%;
	float: left;
}
.statusIcon {
	width: 22px;
	height: 30px;
	margin-left: 3px;
	float: left;
}
.fanStatus {
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}
</style>