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 v-on:mouseover="stop()" v-on:mouseout="move()" class="app">
					<transition-group tag="" name="image">
						<view v-for="(items, index) in timeList" v-show="index === num" :key="index">
							<view class="timeText" :key="index">推荐时间：{{ items }}</view>
						</view>
					</transition-group>
				</view>
				<view class="timeIcon"><image src="../../static/picture/qingwhite.png" style="width: 25px;height: 25px;"></image></view>
				<!-- <div class="bar"><span v-for="(item, index) in timeList" :class="{ active: index === num }" :key="index"></span></div>
				 -->
			</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>
	<initial ref="mychild"></initial>
	</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: '',
			time: '',
			num: 0,
			timeList: ['2019-09-08', '2020-09-08', '2021-09-08'],
			windFielddata: [],
			windFieldsituation: [],
			lineChartdata: [],
			linedata: [],
			windStationCardContainerwidth: ''
		};
	},
	created: function() {
		uni.setStorageSync('im_show','1');
		uni.setStorageSync('im_monitor','1');
		
		this.play();
		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: {
		play() {
			this.time = setInterval(() => {
				this.num++;
				if (this.num == 3) {
					this.num = 0;
				}
			}, 3000);
		},
		change(i) {
			this.num = i;
		},
		stop() {
			clearInterval(this.time);
		},
		move() {
			this.play();
		},
		created() {
			this.play();
		},
		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: 10%;
	height: 20px;
	margin-top: 5px;
	float: left;
}

.timeText {
	width: 70%;
	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: 10%;
	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;
}
.active {
	opacity: 1;
}
/* li div {
	margin-top: -30px;
} */
/* .image-enter-active {
	transition: all 0.5s ease;
}
.image-leave-active {
	transition: all 0.5s ease;
} */
/* .image-enter-to {
	transform: translateY(0);
}
.image-enter {
	transform: translateY(0%);
} */
/* .image-leave {
	transform: translateY(0);
}
.image-leave-to {
	transform: translateY(100%);
} */
.app {
	width: 70%;
	height: 30px;
	float: left;
}

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