sisMobilePhone/pages/index/Index.vue

<template>
	<view class="content">
		<cu-custom bgColor="bg-blacks" :isBack="false">
			<block slot="right">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
			</block>
			<block slot="right">
				<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
					<view class="cu-tag looknumber" style="margin-top: -2%;">
						<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
					</view>
				</view>
			</block>
			<block slot="right">

			</block>
			<block slot="content">{{address}}</block>
			<block slot="right">
				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
			</block>
		</cu-custom>

		<!-- 抽屉组件 -->
		<div v-if="conflict==false">
			<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" @tap="common.navTo('/components/weatherProphet/WeatherProphet')">
					<image src="../../static/picture/dafeng.png" style="width: 20px;height: 20px;margin-left: 10px;"></image>
				</view>
				<view class="timeText">推荐时间：{{dateNow}}</view>
				<view class="timeIcon">
					<image src="../../static/picture/qingwhite.png" style="width: 25px;height: 25px;"></image>
				</view>
			</view>
			<!--电量卡片-->
			<view class="InformationCard">
				<view class="informationCardAll">
					<view class="informationCardTextOne">
						<view class="informationCardText">
							<view class="textSilver" @tap="
									common.navTo(
										'/components/detail/Detail?callTargetName=安全天数&callTargetUnit=天&pointKey=' +
											windpowerstationdetail.target_comprehensive_indicators.aqts_real.ednaId
									)
								">
								安全天数(天):
							</view>
							<view class="textWhite">
								{{ windpowerstationdetail.target_comprehensive_indicators.aqts }}
							</view>
						</view>
						<view class="informationCardTextzj">
							<view class="textSilver" @tap="
									common.navTo(
										'/components/detail/Detail?callTargetName=装机容量&callTargetUnit=mv&pointKey=' +
											windpowerstationdetail.target_comprehensive_indicators.zjrl_real.ednaId
									)
								">
								装机容量(mv):
							</view>
							<view class="textWhite3">
								{{ windpowerstationdetail.target_comprehensive_indicators.zjrl }}
							</view>
						</view>
					</view>
					<view class="informationCardTextTwo">
						<view class="informationCardTextNo1">
							<view class="textSilver" @tap="
									common.navTo(
										'/components/detail/Detail?callTargetName=日发电量&callTargetUnit=kwh&pointKey=' +
											windpowerstationdetail.target_comprehensive_indicators.rfdl_real.ednaId
									)
								">
								日发(万kwh):
							</view>
							<view class="textWhite">
								{{ windpowerstationdetail.target_comprehensive_indicators.rfdl }}
							</view>
						</view>
						<view class="informationCardText3">
							<view class="textSilver" @tap="
									common.navTo(
										'/components/detail/Detail?callTargetName=预测发电量&callTargetUnit=kwh&pointKey=' +
											windpowerstationdetail.target_comprehensive_indicators.ycfdl_real.ednaId
									)
								">
								预测发(万kwh):
							</view>
							<view class="textWhite2">
								{{ windpowerstationdetail.target_comprehensive_indicators.ycfdl }}
							</view>
						</view>
						<view class="informationCardText2">
							<view class="textSilver" @tap="
									common.navTo(
										'/components/detail/Detail?callTargetName=上网电量&callTargetUnit=kwh&pointKey=' +
											windpowerstationdetail.target_comprehensive_indicators.swdl_real.ednaId
									)
								">
								上网(万kwh):
							</view>
							<view class="textWhite">
								{{ windpowerstationdetail.target_comprehensive_indicators.swdl }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--风速卡片-->
			<view class="speedPower">
				<view class="cardinstallredSpeed" @tap="
						common.navTo(
							'/components/detail/Detail?callTargetName=平均风速&callTargetUnit=kw/h&pointKey=' + windpowerstationdetail.target_windSpeed_power.pjfs_real.ednaId
						)
					">
					<view class="cardinstalltitleRed">
						平均风速(m/s)
						<!-- <view class="textWhitekuangSpeed">(m/s)</view> -->
					</view>
					<view class="cardinstallnumberred">{{ windpowerstationdetail.target_windSpeed_power.pjfs }}</view>
					<view class="cardinstallnumberredmin">
						<view class="redMinText">min: {{ windpowerstationdetail.target_windSpeed_power.pjfsMin }}</view>
					</view>
					<view class="cardinstallnumberredmax">
						<view class="redMaxText">max: {{ windpowerstationdetail.target_windSpeed_power.pjfsMax }}</view>
					</view>
				</view>
				<view class="cardinstallredSpeed" @tap="
						common.navTo(
							'/components/detail/Detail?callTargetName=预测风速&callTargetUnit=kw/h&pointKey=' + windpowerstationdetail.target_windSpeed_power.ycfs_real.ednaId
						)
					">
					<view class="cardinstalltitleRed">
						预测风速(m/s)
						<!-- <view class="textWhitekuangSpeed">(m/s)</view> -->
					</view>
					<view class="cardinstallnumberred">{{ windpowerstationdetail.target_windSpeed_power.ycfs }}</view>
					<view class="cardinstallnumberredmin">
						<view class="redMinText">min: {{ windpowerstationdetail.target_windSpeed_power.ycfsMin }}</view>
					</view>
					<view class="cardinstallnumberredmax">
						<view class="redMaxText">max: {{ windpowerstationdetail.target_windSpeed_power.ycfsMax }}</view>
					</view>
				</view>
				<view class="cardinstallredSpeed" @tap="
						common.navTo(
							'/components/detail/Detail?callTargetName=实际功率&callTargetUnit=kw&pointKey=' + windpowerstationdetail.target_windSpeed_power.sjgl_real.ednaId
						)
					">
					<view class="cardinstalltitleRed">
						实际功率(万kw)
						<!-- <view class="textWhitekuang">(kw)</view> -->
					</view>
					<view class="cardinstallnumberred">{{ windpowerstationdetail.target_windSpeed_power.sjgl }}</view>
					<view class="cardinstallnumberredmin">
						<view class="redMinText">min: {{ windpowerstationdetail.target_windSpeed_power.sjglMin }}</view>
					</view>
					<view class="cardinstallnumberredmax">
						<view class="redMaxText">max: {{ windpowerstationdetail.target_windSpeed_power.sjglMax }}</view>
					</view>
				</view>
				<view class="cardinstallredSpeed" @tap="
						common.navTo(
							'/components/detail/Detail?callTargetName=理论功率&callTargetUnit=kw&pointKey=' + windpowerstationdetail.target_windSpeed_power.llgl_real.ednaId
						)
					">
					<view class="cardinstalltitleRed">
						理论功率(万kw)
						<!-- <view class="textWhitekuang">(kw)</view> -->
					</view>
					<view class="cardinstallnumberred">{{ windpowerstationdetail.target_windSpeed_power.llgl }}</view>
					<view class="cardinstallnumberredmin">
						<view class="redMinText">min: {{ windpowerstationdetail.target_windSpeed_power.llglMin }}</view>
					</view>
					<view class="cardinstallnumberredmax">
						<view class="redMaxText">max: {{ windpowerstationdetail.target_windSpeed_power.llglMax }}</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">{{ windpowerstationdetail.index_windturbine_status.jr }}</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">{{ windpowerstationdetail.index_windturbine_status.dj }}</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">{{ windpowerstationdetail.index_windturbine_status.yx }}</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">{{ windpowerstationdetail.index_windturbine_status.gz }}</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">{{ windpowerstationdetail.index_windturbine_status.wh }}</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">{{ windpowerstationdetail.index_windturbine_status.lx }}</view>
					</view>
				</view>
			</view>
			<!--进度条-->
			<view class="progressBar">
				<view class="progressBarAll">
					<view class="progressBarOne">
						<view class="progressBarLeft">
							<view class="progressBarLeftText">{{ windpowerstationdetail.index_electricQuantity.yfdl }}kwh</view>
						</view>
						<view class="progressBarText">月计划发电量进度条</view>
						<view class="progressBarRight">
							<view class="progressBarRightText">{{ windpowerstationdetail.index_electricQuantity.yjhfdl }}kwh</view>
						</view>
					</view>
					<view class="cu-progress round radius striped active">
						<view class="bg-olive" :style="[{ width: loading ? monthOlive : '' }]"></view>
						<view class="bg-angrey" :style="[{ width: loading ? monthAngrey : '' }]"></view>
					</view>
				</view>
				<view class="progressBarAll">
					<view class="progressBarOne">
						<view class="progressBarLeft">
							<view class="progressBarLeftText">{{ windpowerstationdetail.index_electricQuantity.nfdl }}kwh</view>
						</view>
						<view class="progressBarText">年计划发电量进度条</view>
						<view class="progressBarRight">
							<view class="progressBarRightText">{{ windpowerstationdetail.index_electricQuantity.njhfdl }}kwh</view>
						</view>
					</view>
					<view class="cu-progress round radius striped active">
						<view class="bg-olive" :style="[{ width: loading ? yearOlive : '' }]"></view>
						<view class="bg-angrey" :style="[{ width: loading ? yearAngrey : '' }]"></view>
					</view>
				</view>
			</view>
			<scroll-view scroll-x class="horizontalSlider">
				<view class="slide">
					<view class="monthlyUtilizationHours" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=月利用小时&callTargetUnit=h&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.ylyxs_real.ednaId
							)
						">
						月利用小时（h）：{{ windpowerstationdetail.index_target_basic_indicators.ylyxs }}
					</view>
					<view class="yearlyUtilizationHours" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=年利用小时&callTargetUnit=h&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.nlyxs_real.ednaId
							)
						">
						年利用小时（h）：{{ windpowerstationdetail.index_target_basic_indicators.nlyxs }}
					</view>
					<view class="comprehensiveServicePowerConsumptionRate" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=综合厂利用率&callTargetUnit=%&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.zhcydl_real.ednaId
							)
						">
						综合厂用电率(%)：{{ windpowerstationdetail.index_target_basic_indicators.zhcydl }}
					</view>
					<view class="equipmentAvailability" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=设备可利用率&callTargetUnit=%&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.sbklyl_real.ednaId
							)
						">
						设备可利用率(%)：{{ windpowerstationdetail.index_target_basic_indicators.sbklyl }}
					</view>
					<view class="sulfurDioxideEmissionReduction" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName= 减排二氧化硫&callTargetUnit=吨&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.jpeyhl_real.ednaId
							)
						">
						减排二氧化硫(吨)：{{ windpowerstationdetail.index_target_basic_indicators.jpeyhl }}
					</view>
					<view class="carbonDioxideReduction" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=减排二氧化碳&callTargetUnit=吨&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.jpeyht_real.ednaId
							)
						">
						减排二氧化碳(吨)：{{ windpowerstationdetail.index_target_basic_indicators.jpeyht }}
					</view>
					<view class="waterSaving" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=节约用水&callTargetUnit=吨&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.jyys_real.ednaId
							)
						">
						节约用水(吨)：{{ windpowerstationdetail.index_target_basic_indicators.jyys }}
					</view>
					<view class="saveStandardCoal" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=节约标煤&callTargetUnit=吨&pointKey=' +
									windpowerstationdetail.index_target_basic_indicators.jybm_real.ednaId
							)
						">
						节约标煤(吨)：{{ windpowerstationdetail.index_target_basic_indicators.jybm }}
					</view>
					<view class="mttr" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=mttr&callTargetUnit=h&pointKey=' + windpowerstationdetail.index_target_basic_indicators.mttr_real.ednaId
							)
						">
						mttr(h)：{{ windpowerstationdetail.index_target_basic_indicators.mttr }}
					</view>
					<view class="mtbf" @tap="
							common.navTo(
								'/components/detail/Detail?callTargetName=mtbf&callTargetUnit=h&pointKey=' + windpowerstationdetail.index_target_basic_indicators.mtbf_real.ednaId
							)
						">
						mtbf(h)：{{ windpowerstationdetail.index_target_basic_indicators.mtbf }}
					</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" :style="{'width':windStationCardContainerwidth}">
						<view v-for="(item,index) in plusDrawerList" :key="index">
							<WindFarmcard ref="windFarmcard"></WindFarmcard>
						</view>
					</view>
				</scroll-view>
				<!-- 底导航栏挡住部分显示 -->
				<view style="width: 100%; height: 60px; background-color: #242424;"></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';
	import WindFarmcard from '../../components/windFarmcard/WindFarmcard.vue';
	var _self;
	var canvaLineA = null;
	var canvaColumn = null;
	var canvaLineB1 = null;
	var canvaLineB2 = null;
	var canvaLineB3 = null;
	var canvaLineB4 = null;
	var canvaLineB5 = null;
	export default {
		components: {
			drawer: drawer,
			plusDrawer: plusDrawer,
			WindFarmcard: WindFarmcard
		},
		data: function() {
			return {
				conflict:false,
				c1: {
					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: '#F14E51'
						},
						{
							name: '检修损失电量(万kwh)',
							data: [14, 17, 19, 20, 6, 14, 12],
							color: '#FF6B3E'
						},
						{
							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'
						}
					]
				},
				key_aqts: '',
				fdcstatusmodule: {
					fdcstatusmodule: ''
				},
				index_windStation_cardmodule: {
					index_windStation_cardmodule: ''
				},
				index_curve_columnar_five_lossmodule: {
					index_curve_columnar_five_lossmodule: ''
				},
				index_curve_columnar_windSpeed_powermodule: {
					index_curve_columnar_windSpeed_powermodule: ''
				},
				badge: 22,
				drawerList: [],
				permissionsInformation: [],
				plusDrawerList: [],
				leftNavigationtitle: '监视功能分组',
				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,
				monthOlive: '',
				monthAngrey: '',
				yearOlive: '',
				yearAngrey: '',
				FDC: 'CL_FDC',
				socketTask_target_comprehensive_indicators: '',
				socketTask_target_windSpeed_power: '',
				socketTask_index_windturbine_status: '',
				socketTask_index_electricQuantity: '',
				socketTask_index_target_basic_indicators: '',
				socketTask_index_curve_columnar_five_loss: '',
				socketTask_index_curve_columnar_windSpeed_power: '',
				windpowerstationdetail: {
					target_comprehensive_indicators: '',
					target_windSpeed_power: '',
					index_windturbine_status: '',
					index_electricQuantity: '',
					index_target_basic_indicators: ''
				},

				module: true,
				cardmodule: true,
				dateNow: "",
				windFielddata:[],
				windFieldsituation: [],
				lineChartdata:[],
				linedata:[],
				windStationCardContainerwidth:'',
			};
		},
		created: function() {
			this.timeNow();
			this.$nextTick(function(){
				this.viewUserid();
			});
			this.viewUserid();
			this.monitoringAuthority();
			this.judgeWindfield();
			this.address = this.dataprocessing.getWindPowerStationName();
			this.FDC = this.dataprocessing.getWindPowerStationId();
			this.windPowerStationId = this.dataprocessing.getWindPowerStationId();
		},onLoad: function() {

			// let that = this;
			// setTimeout(function() {
			// 	that.loading = true;
			// }, 500);
			// _self = this;
			// this.viewUserid();
			// this.monitoringAuthority();
			// this.judgeWindfield();
			// this.address = this.dataprocessing.getWindPowerStationName();
			// this.FDC = this.dataprocessing.getWindPowerStationId();
			// this.windPowerStationId = this.dataprocessing.getWindPowerStationId();
			// this.cWidth = uni.upx2px(750);
			// this.cHeight = uni.upx2px(400);
			// this.getServerData();
			// this.getColumnData();
			// this.windStationCardCWidth = 250;
			// this.windStationCardCHeight = 150;
			// this.target_comprehensive_indicators();
			// this.index_electricQuantity();
			// this.index_target_basic_indicators();
			// this.index_curve_columnar_five_loss();
			// this.target_windSpeed_power();
			// this.index_windturbine_status();
			// this.getWindStationCardData();
			// this.index_curve_columnar_windSpeed_power();
			// this.index_windStation_card(); /* P6F8与P6F4冲突 */
		
		},
		mounted: function() {

			let that = this;
			setTimeout(function() {
				that.loading = true;
			}, 500);
			_self = this;
			this.viewUserid();
			this.monitoringAuthority();
			this.judgeWindfield();
			this.address = this.dataprocessing.getWindPowerStationName();
			this.FDC = this.dataprocessing.getWindPowerStationId();
			this.windPowerStationId = this.dataprocessing.getWindPowerStationId();
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(400);
			this.getServerData();
			this.getColumnData();
			this.windStationCardCWidth = 250;
			this.windStationCardCHeight = 150;
			this.target_comprehensive_indicators();
			this.index_electricQuantity();
			this.index_target_basic_indicators();
			this.index_curve_columnar_five_loss();
			this.target_windSpeed_power();
			this.index_windturbine_status();
			this.getWindStationCardData();
			this.index_curve_columnar_windSpeed_power();
			this.index_windStation_card(); /* P6F8与P6F4冲突 */
		},
		computed: {
			backStageIp: function() {
				return this.$store.state.wholeSituationBackStageIp;
			},
			backStagePort: function() {
				return this.$store.state.wholeSituationBackStagePort;
			},
			windpowerstationNameToId: function() {
				return this.$store.state.windpowerstationNameToId;
			}
		},
		onHide() {
			this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		onShow: function() {
			this.viewUserid();
			this.monitoringAuthority();
			this.judgeWindfield();
			this.address = this.dataprocessing.getWindPowerStationName();
			this.FDC = this.dataprocessing.getWindPowerStationId();
			this.windPowerStationId = this.dataprocessing.getWindPowerStationId();
			
		},
		methods: {
			timeNow() {
				this.getTimeFormat();
				this.dateNow = new Date().Format('yyyy年MM月dd hh:mm');
				setTimeout(function() {
					this.dateNow = new Date().Format('yyyy年MM月dd hh:mm');
				}, 60000);
			},
			viewUserid: function() {
				this.plusDrawerList = uni.getStorageSync('plusList');
				let _this = this;
				
				// if(_this.$refs.windFarmcard !=undefined)
				// {
				// 	for (let i = 0; i < _this.plusDrawerList.length; i++) {
						
				// 		_this.$refs.windFarmcard[i].getWindfieldid(_this.plusDrawerList[i]);
				// 	}
				// }
				
				this.windStationCardContainerwidth = (260 * this.plusDrawerList.length - 260)+"px";
				console.log(this.windStationCardContainerwidth)
			},
			judgeWindfield:function(){
				this.plusDrawerList = uni.getStorageSync('plusList');
				let _this = this;
				
				// if(_this.$refs.windFarmcard!=undefined)
				// {
				// 	for (let i = 0; i < _this.plusDrawerList.length; i++) {
						
				// 		_this.$refs.windFarmcard[i].getWindfieldid(_this.plusDrawerList[i]);
				// 	}
				// }

			},
			monitoringAuthority: function() {
				this.drawerList = uni.getStorageSync('leftlist1');
			},
			async index_curve_columnar_five_loss() {
				Date.prototype.Format = function(fmt) {
					var o = {
						'M+': this.getMonth() + 1, //月份
						'd+': this.getDate(), //日
						'h+': this.getHours(), //小时
						'm+': this.getMinutes(), //分
						's+': this.getSeconds(), //秒
						'q+': Math.floor((this.getMonth() + 3) / 3), //季度
						S: this.getMilliseconds() //毫秒
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[
							k]).substr(('' + o[k]).length));
					return fmt;
				};
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_index_curve_columnar_five_loss = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_6/functionNumber_7/all',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_index_curve_columnar_five_loss.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

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

						let ColumnStack = this.c1;

						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: '#F14E51'
								}]
							};
							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: '#FF6B3E'
								}]
							};
							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)
							}
						}

						ColumnStack.categories = [];
						//ColumnStack.series[0].data=[];
						ColumnStack.series[1].data = [];
						ColumnStack.series[2].data = [];
						ColumnStack.series[3].data = [];
						ColumnStack.series[4].data = [];
						ColumnStack.series[5].data = [];
						ColumnStack.series[6].data = [];

						/* LineA.series[0].name=this.targetName; */
						_this.Xzuobiao = [];
						_this.rifa = [];
						_this.guzhang = [];
						_this.jianxiu = [];
						_this.xiandian = [];
						_this.xingneng = [];
						_this.shoulei = [];
						for (var i = 0; i < _this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
							.length; i++) {
							let time = new Date(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].time).Format('MM/dd');

							ColumnStack.categories.push(time);
							//console.log(_this.index_curve_columnar_windSpeed_powermodule.index_curve_columnar_windSpeed_powermodule['MHS_FDC']['gl'][i].pointValueInDouble);
							//ColumnStack.series[0].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value7);
							ColumnStack.series[1].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value1);
							ColumnStack.series[2].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value2);
							ColumnStack.series[3].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value3);
							ColumnStack.series[4].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value4);
							ColumnStack.series[5].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value5);
							ColumnStack.series[6].data.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[
								_this.FDC][i].value6);

							_this.Xzuobiao.push(time);
							// _this.$set(_this.rifa,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value1);
							// _this.$set(_this.guzhang,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value2);
							// _this.$set(_this.jianxiu,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value3);
							// _this.$set(_this.xiandian,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value4);
							// _this.$set(_this.xingneng,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value5);
							// _this.$set(_this.shoulei,i,_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][i].value6);
							_this.rifa.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC][
								i
							].value1);
							_this.guzhang.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].value2);
							_this.jianxiu.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].value3);
							_this.xiandian.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].value4);
							_this.xingneng.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].value5);
							_this.shoulei.push(_this.index_curve_columnar_five_lossmodule.index_curve_columnar_five_lossmodule[_this.FDC]
								[i].value6);

							//ColumnStack.series[1].data.push(_this.rifa[i]);
						}



						_this.showColumnStack('canvasColumnStack', ColumnStack);

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

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

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_windStation_card.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						let json = JSON.parse(res.data);
							for (let x in json) {
								_this.windFielddata.push(json[x])
						}
						for(let i=0;i<_this.plusDrawerList.length;i++){
							_this.$refs.windFarmcard[i].getWindfieldid(_this.plusDrawerList[i]);
							_this.$refs.windFarmcard[i].getWindfielddata(_this.windFielddata[i]);
							
						}
						_this.cardmodule = false;
					});
				});
			},

			async index_curve_columnar_windSpeed_power() {
				Date.prototype.Format = function(fmt) {
					var o = {
						'M+': this.getMonth() + 1, //月份
						'd+': this.getDate(), //日
						'h+': this.getHours(), //小时
						'm+': this.getMinutes(), //分
						's+': this.getSeconds(), //秒
						'q+': Math.floor((this.getMonth() + 3) / 3), //季度
						S: this.getMilliseconds() //毫秒
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[
							k]).substr(('' + o[k]).length));
					return fmt;
				};
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_index_curve_columnar_windSpeed_power = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_6/functionNumber_6/all',
					/* url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_7/functionNumber_4/all', */
					success(data) {
						console.log('websocket连接成功');
					}
				});

				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_index_curve_columnar_windSpeed_power.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_curve_columnar_windSpeed_power.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						let json = JSON.parse(res.data);
					
						//console.log(json);
						for(let x in json){
							if(x==_this.FDC)
							{
								_this.linedata=json[x];
							}
							_this.lineChartdata.push(json[x]);
						}
						for(let i=0;i<_this.plusDrawerList.length;i++){
							_this.$refs.windFarmcard[i].getWindfieldid(_this.plusDrawerList[i]);
							_this.$refs.windFarmcard[i].getUchartData(_this.lineChartdata[i]);
						}
						

						let Line = {
							categories: [],

							series: [{
									name: '预测功率',

									data: [],

									color: '#4BB94B',

									textColor: '#FFFFFF',

									textSize: this.seriesTextSize,

									format: val => {
										return val + 'kwh';
									},

									index: 0,

									legendShape: 'circle'
								},

								{
									name: '实际功率',

									data: [],

									color: '#E82E2F',

									textColor: '#FFFFFF',

									textSize: this.seriesTextSize,

									format: val => {
										return val + 'm/s';
									},

									index: 1,

									legendShape: 'circle'
								},

								{
									name: '理论功率',

									data: [],

									color: '#F5A83C',

									textColor: '#FFFFFF',

									textSize: this.seriesTextSize,

									format: val => {
										return val + 'kwh';
									},

									index: 0,

									legendShape: 'circle'
								},

								{
									name: '风速',

									data: [],

									color: '#4A80B1',

									textColor: '#FFFFFF',

									textSize: this.seriesTextSize,

									format: val => {
										return val + 'kwh';
									},

									index: 1,

									legendShape: 'circle'
								}
							]
						};

						Line.categories = [];
						Line.series[0].data = [];
						/* LineA.series[0].name=this.targetName; */
						console.log(_this.FDC);
						for (var i = 0; i <_this.linedata.length; i++) {
							let time = new Date(_this.linedata[i].time).Format('hh');

							Line.categories.push(time);
							//console.log(_this.index_curve_columnar_windSpeed_powermodule.index_curve_columnar_windSpeed_powermodule['MHS_FDC']['gl'][i].pointValueInDouble);
							Line.series[0].data.push(
								_this.linedata[i].value1							);
							Line.series[1].data.push(
								_this.linedata[i].value2
							);
							Line.series[2].data.push(
								_this.linedata[i].value3
							);
							Line.series[3].data.push(
								_this.linedata[i].value4
							);
						}

						
						_this.showLineA('canvasLineA', Line);
		
						/* 
												_this.showWindStationCardLineA4('windStationCanvasLineD', LineD);
												_this.showWindStationCardLineA5('windStationCanvasLineE', LineE); */
					});
				});
			},
			openDrawer: function() {
				if(this.$refs.drawer != undefined){
					this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList, this.leftNavigationtitle);
				}else{
					//console.log('雷霆嘎巴');
				}
			},
			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.conflict = true;
				this.modalName = e.currentTarget.dataset.target;
				this.viewUserid();
				this.monitoringAuthority();
				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
			},
			hideModal() {
				this.conflict = false;
				this.modalName = null;
				this.$refs.plusDrawer.hideModal(this.modalName);
			},
			async target_comprehensive_indicators() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_target_comprehensive_indicators = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_6/functionNumber_1/all',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_target_comprehensive_indicators.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

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

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

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_windturbine_status.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windpowerstationdetail.index_windturbine_status = JSON.parse(res.data)[_this.FDC];
						// _this.fdcstatusmodule.fdcstatusmodule = JSON.parse(res.data);
						let json = JSON.parse(res.data);
							for (let x in json) {
								_this.windFieldsituation.push(json[x]);
						}
							for(let i=0;i<_this.plusDrawerList.length;i++){
								_this.$refs.windFarmcard[i].getWindfieldid(_this.plusDrawerList[i]);
								_this.$refs.windFarmcard[i].getHoursWeatherData(_this.windFieldsituation[i]);
							}
						_this.cardmodule = false;
						console.log("---");
						_this.module = false;
					});
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				/* 			this.socketTask_comprehensive_target.onClose(() => {
									uni.request({
									    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
									    success: (res) => {
						
									    }
									});
							}) */
			},
			async index_electricQuantity() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_index_electricQuantity = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_6/functionNumber_4/all',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_index_electricQuantity.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_electricQuantity.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windpowerstationdetail.index_electricQuantity = JSON.parse(res.data)[_this.FDC];
						_this.monthOlive = (_this.windpowerstationdetail.index_electricQuantity.yfdl / 10000) * 100 + '%';
						_this.monthAngrey = (1 - _this.windpowerstationdetail.index_electricQuantity.yfdl / 10000) * 100 + '%';
						_this.yearOlive = (_this.windpowerstationdetail.index_electricQuantity.nfdl / 100000) * 100 + '%';
						_this.yearAngrey = (1 - _this.windpowerstationdetail.index_electricQuantity.nfdl / 100000) * 100 + '%';
					});
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				/* 			this.socketTask_comprehensive_target.onClose(() => {
									uni.request({
									    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
									    success: (res) => {
						
									    }
									});
							}) */
			},
			async index_target_basic_indicators() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_index_target_basic_indicators = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.backStageIp + ':' + this.backStagePort + '/websocket/pageNumber_6/functionNumber_5/all',
					success(data) {
						console.log('websocket连接成功');
					}
				});
				let windpowerstationid = uni.getStorageSync('windpowerstationName');
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_index_target_basic_indicators.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_index_target_basic_indicators.onMessage(res => {
						//console.log("收到服务器内容：" + res.data);
						_this.windpowerstationdetail.index_target_basic_indicators = JSON.parse(res.data)[_this.FDC];
					});
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				/* 			this.socketTask_comprehensive_target.onClose(() => {
									uni.request({
									    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
									    success: (res) => {
						
									    }
									});
							}) */
			},
			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: [],
							color: '#4BB94B',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 0,
							legendShape: 'circle'
						},
						{
							name: '风速',
							data: [],
							color: '#E82E2F',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'm/s';
							},
							index: 1,
							legendShape: 'circle'
						},
						{
							name: '理论功率',
							data: [],
							color: '#F5A83C',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 0,
							legendShape: 'circle'
						},
						{
							name: '预测功率',
							data: [],
							color: '#4A80B1',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							format: val => {
								return val + 'kwh';
							},
							index: 1,
							legendShape: 'circle'
						}
					]
				};

				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: '         风速:(m/s)',
								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 = this.c1;

				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: '#F14E51'
						}]
					};
					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: '#FF6B3E'
						}]
					};
					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: 5,
						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 '';
						} else {
							return category + ' ' + item.name + ':' + item.data;
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineB1(e) {
				canvaLineB1.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineB2(e) {
				canvaLineB2.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineB3(e) {
				canvaLineB3.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineB4(e) {
				canvaLineB4.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineB5(e) {
				canvaLineB5.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			getWindStationCardData: function() {
				
			}
		}
	};
</script>

<style>
	.textSmail {
		font-size: 12px;
		transform: scale(0.8);
	}

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

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

	.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: 300px;
		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/fzltxh.TTF);
	}

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

	.top {
		width: 100%;
		height: 130upx;
		padding-top: 5%;
		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;
		margin-left: -60%;
		margin-top: 6%;
	}

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

		margin-right: 2.5%;
	}

	.textWindpowerstation {
		width: 180px;
		height: 45px;
		float: left;
		text-align: center;
		margin-left: 18px;
	}

	.time {
		clear: both;
		background-color: #242424;
		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: 25px;
		height: 30px;
		float: right;
		margin-right: 2.5%;
		/* 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;
		text-align: center;
		/* 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: white;
		/* color: #449618; */
		line-height: 25px;
		float: left;
	}

	.cardinstallnumbergreenmin {
		margin-left: 2px;
		width: 55%;
		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: 40%;
		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: left;
		margin-left: 40px;
	}

	.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: white;
		/* 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;
		text-align: center;
		/* 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: silver;
		float: right;
		margin-right: 70px;
	}

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

	.textWhite {
		color: white;
		float: right;
		font-size: 10px;
		margin-right:3.5%;
		transform: scale(0.975);
		/* text-align: right; */
	}

	.textWhite2 {
		color: white;
		float: right;
		margin-right: 15%;
		transform: scale(0.975);
	}

	.textWhite3 {
		color: white;
		float: right;
		margin-right: 3.5%;
		transform: scale(0.975);
	}

	.textSilver {
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		float: left;
	}

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

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

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

	.informationCardTextNo1 {
		/* margin-left: 2%; */
		width: 115px;
		height: 35px;
		font-size: 10px;
		line-height: 35px;
		font-size: 10px;
		transform: scale(0.975);
		float: left;
	}

	.informationCardText {
		/* margin-left: 2%; */
		width: 115px;
		height: 35px;
		line-height: 35px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		font-size: 10px;
		transform: scale(0.975);
		float: left;
	}

	.informationCardTextzj {
		/* margin-left: 43%; */
		width: 115px;
		height: 35px;
		line-height: 35px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		font-size: 10px;
		transform: scale(0.975);
		float: right;
	}

	.informationCardTextTwo {
		width: 100%;
		height: 35px;
		float: left;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
	}

	.informationCardText2 {
		/* margin-left: 6%; */
		margin-left: calc(50% - 190px);
		width: 115px;
		height: 35px;
		font-size: 10px;
		line-height: 35px;
		transform: scale(0.975);
		float: left;
	}

	.informationCardText3 {
		/* margin-left: 6%; */
		margin-left: calc(50% - 170px);
		width: 130px;
		height: 35px;
		font-size: 10px;
		line-height: 35px;
		transform: scale(0.975);
		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: 135px;;
		/* background-color: #242424; */
	}

	.scrollWindStationCard {
		white-space: nowrap;
	}

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

	.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: left;
		font-size: 12px;
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		border-radius: 5px;
		float: left;
	}

	.powerAndSpeedRedText {
		margin-left: 2%;
		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 {
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.performancePowerText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.performancePower {
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.limitedPowerText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.limitedPower {
		margin-left: 1.2%;
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.maintenancePowerText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.maintenancePower {
		margin-left: 2px;
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.faultPowerText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.faultPower {
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.powerGenerationText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.powerGeneration {
		width: 24.5%;
		height: 25px;
		float: left;
	}

	.directGenerationText {
		width: 55px;
		height: 25px;
		float: left;
		margin-left: 2px;
		line-height: 25px;
	}

	.directGeneration {
		width: 24.5%;
		height: 25px;
		float: left;
		margin-left: 1.3%;

	}

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