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: 18px;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" style="margin-top: 10px;">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				<view class="textWindpowerstation">{{address}}</view>
			</view>
			<view class="plus" @tap="showModal" data-target="viewModal">+</view>
		</view>
		<!-- 抽屉组件 -->
		<div>
			<drawer ref="drawer"></drawer>
		</div>
		<div class="plusDrawer" @tap="hideModal">
			<plusDrawer ref="plusDrawer"></plusDrawer>
		</div>
		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
		<!--时间组件-->
		<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" @tap="common.navTo('/components/detail/Detail')">安全天数</view>
						<view class="textWhite">(天)</view>
						:15
					</view>
					<view class="informationCardTextzj">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">装机容量</view>
						<view class="textWhite">(MV)</view>
						:15
					</view>
				</view>
				<view class="informationCardTextTwo">
					<view class="informationCardTextNo1">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">日发电量</view>
						<view class="textWhite">(kwh)</view>
						:150
					</view>
					<view class="informationCardText3">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">预测发电量</view>
						<view class="textWhite">(kwh)</view>
						:15
					</view>
					<view class="informationCardText2">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">上网电量</view>
						<view class="textWhite">(kwh)</view>
						:15
					</view>
				</view>
			</view>
		</view>
		<!--风速卡片-->
		<view class="speedPower">
			<view class="cardinstallredSpeed" @tap="common.navTo('/components/detail/Detail')">
				<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" @tap="common.navTo('/components/detail/Detail')">
				<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" @tap="common.navTo('/components/detail/Detail')">
				<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" @tap="common.navTo('/components/detail/Detail')">
				<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" @tap="common.navTo('/components/detail/Detail')">月利用小时（h）：13</view>
							<view class="yearlyUtilizationHours" @tap="common.navTo('/components/detail/Detail')">年利用小时（h）：13</view>
							<view class="comprehensiveServicePowerConsumptionRate" @tap="common.navTo('/components/detail/Detail')">综合厂用电率(%)：20</view>
							<view class="equipmentAvailability" @tap="common.navTo('/components/detail/Detail')">设备可利用率(%)：90</view>
							<view class="sulfurDioxideEmissionReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化硫(吨)：21</view>
							<view class="carbonDioxideReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化碳(吨)：5</view>
							<view class="waterSaving" @tap="common.navTo('/components/detail/Detail')">节约用水(吨)：15</view>
							<view class="saveStandardCoal" @tap="common.navTo('/components/detail/Detail')">节约标煤(吨)：35</view>
							<view class="mttr" @tap="common.navTo('/components/detail/Detail')">mttr(h)：22</view>
							<view class="mtbf" @tap="common.navTo('/components/detail/Detail')">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="HistogramTitle">五项损失柱状图</view>
			<view class="choice">
				<view class="directGeneration">
					<image src="../../static/picture/dianliang/dianlianglan.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="directGenerationText" @click="directGeneration()">
						应发</view>
				</view>
				<view class="powerGeneration">
					<image src="../../static/picture/dianliang/dianlianglv.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="powerGenerationText" @click="powerGeneration()">日发</view>
				</view>
				<view class="faultPower">
					<image src="../../static/picture/dianliang/dianlianghong.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="faultPowerText" @click="faultPower()">故障损失</view>
				</view>
				<view class="maintenancePower">
					<image src="../../static/picture/dianliang/dianliangcheng.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="maintenancePowerText" @click="maintenancePower()">检修损失</view>
				</view>
				<view class="limitedPower">
					<image src="../../static/picture/dianliang/dianliangfen.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="limitedPowerText" @click="limitedPower()">限电损失</view>
				</view>
				<view class="performancePower">
					<image src="../../static/picture/dianliang/dianliangzi.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="performancePowerText" @click="performancePower()">性能损失</view>
				</view>
				<view class="AffectedPower">
					<image src="../../static/picture/dianliang/dianlianghui.png" style="width: 18px;height: 18px;float: left;margin-top: 4px;"></image>
					<view class="AffectedPowerText" @click="AffectedPower()">受累损失</view>
				</view>
			</view>
			<view class="qiun-chart">
				<canvas canvas-id="canvasColumnStack" id="canvasColumnStack" class="chart" @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>
		</scroll-view>
		
		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
			<text class="cuIcon-pullright"></text>
		</view>
	</view>
	
</template>

<script>
	import plusDrawer from '../../components/drawer/plusDrawer.vue'
	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,
			"plusDrawer": plusDrawer,
		},
		data: function() {
			return {
				badge: 22,
				drawerList: [{
						"name": "首页"
					},
					{
						"name": "状态监视"
					},
					{
						"name": "矩阵监视"
					},
					{
						"name": "风场监视"
					},
					{
						"name": "人员监视"
					},
				],
				plusDrawerList: [{
						name: "宁夏新能源公司",
						windPowerStationId: "NINGXIAXINNENGYUANGONGSI"
					},
					{
						name: "牛首山风电场",
						windPowerStationId: "NSS_FDC"
					},
					{
						name: "香山风电场",
						windPowerStationId: "XS_FDC"
					},
					{
						name: "石板泉风电场",
						windPowerStationId: "SBQ_FDC"
					},
					{
						name: "青山风电场",
						windPowerStationId: "QS_FDC"
					},
					{
						name: "麻黄山风电场",
						windPowerStationId: "MHS_FDC"
					},
				],
				modalName: null,
				address: '宁夏新能源公司',
				windPowerStationId: '',
				inconList: ['form', 'favor', 'question', 'edit'],
				minaverageSpeed: '12',
				maxaverageSpeed: '25',
				loading: false,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				dayHair: false,
				fault: false,
				overhaul: false,
				powerLimitation: false,
				performance: false,
				toBeInvolved: false,
				Xzuobiao: ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18"],
				rifa: [18, 13, 12, 17, 13, 7, 11],
				guzhang: [17, 15, 17, 21, 16, 8, 10],
				jianxiu: [14, 17, 19, 20, 6, 14, 12],
				xiandian: [14, 17, 19, 20, 6, 14, 12],
				xingneng: [15, 17, 19, 20, 6, 4, 12],
				shoulei: [14, 17, 19, 20, 6, 4, 12],
				clickFlag: "stack",
				windStationCardCWidth: '',
				windStationCardCHeight: '',
				windStationCardPixelRatio: 1
			};
		},
created: function() {
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
		},
		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();
		},
		onHide() {
			this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		onShow(){
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
			this.address = this.getWindPowerStationNameToSessionStorage();
		},
		methods: {
			openDrawer: function() {
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
			},
			closeDrawer: function() {
				this.drawerIsShow = false;
			},
			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
				uni.setStorageSync('windpowerstationName', windpowerstationName);
				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
				//this.common.goback('/pages/index/Index');
			},
			getWindPowerStationNameToSessionStorage() {
				uni.getStorageSync('windpowerstationName');
				return uni.getStorageSync('windpowerstationName');
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
			},
			hideModal() {
				this.modalName = null;
				this.$refs.plusDrawer.hideModal(this.modalName);
			},
			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'
						}
					}
				});
			},
			AffectedPower() {
				this.toBeInvolved = true,
					this.performance = false;
				this.powerLimitation = false;
				this.overhaul = false;
				this.dayHair = false;
				this.fault = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			performancePower() {
				this.performance = true;
				this.powerLimitation = false;
				this.toBeInvolved = false,
					this.overhaul = false;
				this.dayHair = false;
				this.fault = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			limitedPower() {
				this.toBeInvolved = false,
					this.powerLimitation = true;
				this.performance = false;
				this.overhaul = false;
				this.dayHair = false;
				this.fault = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			maintenancePower() {
				this.toBeInvolved = false,
					this.overhaul = true;
				this.performance = false;
				this.dayHair = false;
				this.fault = false;
				this.powerLimitation = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			directGeneration() {
				this.toBeInvolved = false,
					this.dayHair = false;
				this.performance = false;
				this.fault = false;
				this.overhaul = false;
				this.powerLimitation = false;
				this.clickFlag = "stack";
				this.getColumnData();
			},
			powerGeneration() {
				this.toBeInvolved = false,
					this.dayHair = true;
				this.performance = false;
				this.fault = false;
				this.overhaul = false;
				this.powerLimitation = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			faultPower() {
				this.toBeInvolved = false,
					this.fault = true;
				this.performance = false;
				this.dayHair = false;
				this.overhaul = false;
				this.powerLimitation = false;
				this.clickFlag = "group";
				this.getColumnData();
			},
			getColumnData() {
				let ColumnStack = {
					"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18"],
					"series": [{
							"name": "应发电量(万kwh)",
							"data": [0, 0, 0, 0, 0, 0, 0],
							color: '#007BF9',

						}, {
							"name": "日发电量(万kwh)",
							"data": [18, 13, 12, 17, 13, 7, 11],
							color: '#4EB64E',
						}, {
							"name": "故障损失电量(万kwh)",
							"data": [17, 15, 17, 21, 16, 8, 10],
							color: '#F76E6C',
						}, {
							"name": "检修损失电量(万kwh)",
							"data": [14, 17, 19, 20, 6, 14, 12],
							color: '#FF8F3E',
						},
						{
							"name": "限电损失电量(万kwh)",
							"data": [14, 17, 19, 20, 6, 14, 12],
							color: '#DC62D2',
						},
						{
							"name": "性能损失电量(万kwh)",
							"data": [15, 17, 19, 20, 6, 4, 12],
							color: '#9DA3F6',
						},
						{
							"name": "受累损失电量(万kwh)",
							"data": [14, 17, 19, 20, 6, 4, 12],
							color: '#9E9E9E',
						},
					],
				};

				if (this.dayHair) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
								"name": "日发电量(万kwh)",
								"data": [18, 13, 12, 17, 13, 7, 11, 15, 13],
								color: '#4EB64E',
							}

						],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.rifa.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.rifa[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				if (this.fault) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
							"name": "故障损失电量(万kwh)",
							"data": [17, 15, 17, 21, 16, 8, 10, 17, 11],
							color: '#F76E6C',
						}, ],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.guzhang.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.guzhang[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				if (this.overhaul) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
								"name": "检修损失电量(万kwh)",
								"data": [14, 17, 19, 20, 6, 14, 12, 14, 10],
								color: '#FF8F3E',
							}

						],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.jianxiu.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.jianxiu[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				if (this.powerLimitation) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
								"name": "限电损失电量(万kwh)",
								"data": [14, 17, 19, 20, 6, 14, 12, 14, 10],
								color: '#DC62D2',
							}

						],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.xiandian.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.xiandian[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				if (this.performance) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
								"name": "性能损失电量(万kwh)",
								"data": [14, 17, 19, 20, 6, 14, 12, 14, 10],
								color: '#9DA3F6',
							}

						],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.xingneng.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.xingneng[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				if (this.toBeInvolved) {
					ColumnStack = {
						"categories": ["04/12", "04/13", "04/14", "04/15", "04/16", "04/17", "04/18", "04/19", "04/20"],
						"series": [{
								"name": "受累损失电量(万kwh)",
								"data": [14, 17, 19, 20, 6, 14, 12, 14, 10],
								color: '#9E9E9E',
							}

						],
					};
					ColumnStack.categories = [];
					ColumnStack.series[0].data = [];
					for (let i = 0; i < this.shoulei.length; i++) {
						ColumnStack.categories.push(this.Xzuobiao[i]);
						// console.log(ColumnStack.categories)
						ColumnStack.series[0].data.push(this.shoulei[i]);
						// console.log(ColumnStack.series[1].data)
					}
				}
				this.showColumnStack("canvasColumnStack", ColumnStack);
			},
			showColumnStack(canvasId, chartData) {

				var _self = this;
				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,
						gridColor: 'silver',
						fontColor: 'silver',

					},
					yAxis: {
						data: [{
							type: "value",
							fontColor: 'silver',
							disabled: false, //y轴轴线
							min: 0,
							max: 60,
							axisLineColor: "#2E2E2E",
							title: "    电量:(kwh)",
							titleFontColor: "silver"
						}],
						gridColor: "#2E2E2E",
						splitNumber: 4,
						gridType: 'solid',
						dashLength: 8,
						showTitle: false,
						//disabled:true
					},
					dataLabel: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: _self.clickFlag,
							width: '13'
						}
					}
				});
			},
			touchColumn(e) {
				let _this = this;
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (item.name == "应发电量(万kwh)") {
							return category + ' ' + item.name + ':' + 50;
						} else {
							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: 15px;
		/* 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: 7px;
		font-size: 12px;
	}

	.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: 7px;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.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: 7px;
		float: left;
		font-size: 12px;
	}

	.horizontalSlider {
		white-space: nowrap;
		width: 100%;
		height: 100px;
		background-color: #242424;
		clear: both;
		margin-top: 510px;
	}

	.slide {
		width: 920px;
		height: 100px;
		background-color: #242424;
	}

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

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

	.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: 280px;
		background-color: #242424;
		margin-top: 10px;
		float: left;
	}
	
	.HistogramTitle{
		width: calc(100% - 9px);
		height: 30px;
		line-height: 30px;
		font-size: 11px;
		color: silver;
		margin-left: 9px;
	}

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

	body {
		font-family:'方正兰亭细黑_GBK';
		font-size: 20px;
		color: silver;
		background: #000;
	}
@font-face {
	font-family:'方正兰亭细黑_GBK';
	src: url(../../static/方正兰亭细黑_GBK.TTF);
}
	page {
		background-color: #1f1f1f;
		font-family:'方正兰亭细黑_GBK';
		overflow-x: hidden;
	}

	.top {
		width: 100%;
		height: 130upx;
		padding-top: 5upx;
		background-color: #1f1f1f;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;
	}

	.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;
		margin-top: 11px;
		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;
		margin-top: 11px;
	}
	.textWindpowerstation{
		width: 180px;
		height: 45px;
		float: left;
		text-align: center;
		margin-left: 18px;
	}
	.time {
		clear: both;
		background-color: #242424;
		margin-top: 80px;
		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: 2.5%;
		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;
	}

	.informationCardTextNo1{
			margin-left: 2%;
			width: 115px;
			height: 35px;
			font-size: 13px;
			line-height: 35px;
			float: left;
		}
		.informationCardText {
			margin-left: 2%;
			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: 13px;
			float: left;
		}
	
		.informationCardTextzj {
			margin-left: 43%;
			width: 105px;
			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;
		}
	
		.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%;
			width: 110px;
			height: 35px;
			font-size: 13px;
			line-height: 35px;
			float: left;
		}
		.informationCardText3 {
			margin-left: 6%;
			width: 120px;
			height: 35px;
			font-size: 13px;
			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: calc(100% - 5%);
		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: 320px;
		color: silver;
		margin-bottom: 120px;
		
		/* background-color: #242424; */
	}

	.scrollWindStationCard {
		white-space: nowrap;
	}

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

	.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;
	}
	.AffectedPowerText{
				width: 55px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
			.AffectedPower{
				margin-left: 11px;
				width: 20%;
				height: 25px;
				float: left;
			}
			.performancePowerText{
				width: 55px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
			.performancePower{
				margin-left: 11px;
				width: 20%;
				height: 25px;
				float: left;
			}
			.limitedPowerText{
				width: 55px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
			.limitedPower{
				margin-left: 9px;
				width: 20%;
				height: 25px;
				float: left;
			}
			.maintenancePowerText{
				width: 55px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
			.maintenancePower{
				margin-left: 30px;
				width: 20%;
				height: 25px;
				float: left;
			}
			.faultPowerText{
				width: 55px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
			.faultPower{
				width: 20%;
				height: 25px;
				float: left;
				margin-left: 11px;
			}
			.powerGenerationText {
				width: 30px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
		
			.powerGeneration {
				width: 20%;
				height: 25px;
				float: left;
				margin-left: 11px;
			}
		
			.directGenerationText {
				width: 30px;
				height: 25px;
				float: left;
				margin-left: 2px;
				line-height: 25px;
			}
		
			.directGeneration {
				width: 20%;
				height: 25px;
				float: left;
				margin-left: 9px;
		
			}
	
	
		.choice {
			width: 100%;
			height: 80px;
			float: left;
			user-select: text;
			-webkit-user-select: text;
			-moz-user-select: text;
			-ms-user-select: text;
			color: silver;
			font-size: 12px;
			
		}
	
		.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;
		}
		.qiun-chart {
				margin-top: 50px;
				width: 750upx;
				height: 400upx;
		}
		.chart {
				width: 750upx;
				height: 400upx;
		}
		.DrawerPage {
			position: fixed;
			width: 100vw;
			height: 100vh;
			left: 0vw;
			background-color: #1f1f1f;
			transition: all 0.4s;
		}
		
		.DrawerPage.show {
			transform: scale(0.9, 0.9);
			left: 85vw;
			box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
			transform-origin: 0;
		}
		
		.DrawerWindow {
			position: absolute;
			width: 85vw;
			height: 100vh;
			left: 0;
			top: 0;
			transform: scale(0.9, 0.9) translateX(-100%);
			opacity: 0;
			pointer-events: none;
			transition: all 0.4s;
			padding: 100upx 0;
		}
		
		.DrawerWindow.show {
			transform: scale(1, 1) translateX(0%);
			opacity: 1;
			pointer-events: all;
		}
		
		.DrawerClose {
			position: absolute;
			width: 40vw;
			height: 100vh;
			right: 0;
			top: 0;
			color: transparent;
			padding-bottom: 30upx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
			letter-spacing: 5px;
			font-size: 50upx;
			opacity: 0;
			pointer-events: none;
			transition: all 0.4s;
		}
		
		.DrawerClose.show {
			opacity: 1;
			pointer-events: all;
			width: 15vw;
			color: #fff;
		}
		
		.DrawerPage .cu-bar.tabbar .action button.cuIcon {
			width: 64upx;
			height: 64upx;
			line-height: 64upx;
			margin: 0;
			display: inline-block;
		}
		
		.DrawerPage .cu-bar.tabbar .action .cu-avatar {
			margin: 0;
		}
		
		.DrawerPage .nav {
			flex: 1;
		}
		
		.DrawerPage .nav .cu-item.cur {
			border-bottom: 0;
			position: relative;
		}
		
		.DrawerPage .nav .cu-item.cur::after {
			content: "";
			width: 10upx;
			height: 10upx;
			background-color: currentColor;
			position: absolute;
			bottom: 10upx;
			border-radius: 10upx;
			left: 0;
			right: 0;
			margin: auto;
		}
		
		.DrawerPage .cu-bar.tabbar .action {
			flex: initial;
		}
</style>