sisMobilePhone/components/monitor/MatrixMonitor.vue

<template>
	<view>
		<!--导航栏-->
		<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="closePlusDrawer">
			<plusDrawer ref="plusDrawer"></plusDrawer>
		</div>
		<scroll-view scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
			<view class="windStationNameAndChoice">
				<view class="windStationName">{{ windStationName }}</view>
				<view class="windStationChoice"><a @click="showCenterVisible = true">其他ㅤ〉</a></view>
				<!-- @tap="showModal" data-target="DialogModal1" -->
				<!-- @tap="changeModalStaus" @click="showCenterVisible = true" -->
			</view>
			<!-- 选择风场弹窗 -->
			<!-- <view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-gradual-sisBlack justify-end">
					<view class="content" style="text-align: left;">选择您想查看的风场</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="cu-bar bg-gray justify-end">
					<view class="action" style="width: 100%;margin: 0px;">
						<view class="windStationList" :style="{ 'height': windStationListHeight}">
							<view class="windStationItemContainer" v-for="(item,index) in windStation" :key="index" :class="[choiceIndex==index?'windStationItemContainerBlack':'windStationItemContainer']" >
								<view class="windStationItem"  @tap="choiceWindStation(item,index)">{{item}}</view>
							</view>							
						</view>					
					</view>
				</view>
			</view>
		</view> -->
			<s-popup custom-class="center-popup" position="center" v-model="showCenterVisible">
				<view class="s-popup-wrapper" :style="{'height': spopupWrapperHeight}">
					<view class="s-popup-title">
						<view class="s-popup-word">选择您想查看的风场</view>
						<view class="s-popup-cha"><a @tap="showCenterVisible = false">×</a></view>
					</view>
					<view class="windStationList" :style="{ 'height': windStationListHeight}">
						<view class="windStationItemContainer" v-for="(item,index) in windFielddata" :key="index" :class="[choiceIndex==index?'windStationItemContainerBlack':'windStationItemContainer']">
							<view class="windStationItem" @tap="choiceWindStation(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>

			</s-popup>

			<!-- 风机状态卡片 -->
			<view class="windMotorStatusContainer">
				<view class="windMotorStatusCardJieRu" :class="[clickFlag == 'jieRu' ? 'windMotorStatusCardJieRuRed' : 'windMotorStatusCardJieRu']"
				 @tap="clickWindMotorStatusCard('jieRu')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/003.png" style="width: 25px;height: 25px;"></image>
					</view>
					接入 {{ jieRu }}
				</view>
				<view class="windMotorStatusCardYunXing" :class="[clickFlag == 'yunXing' ? 'windMotorStatusCardYunXingRed' : 'windMotorStatusCardYunXing']"
				 @tap="clickWindMotorStatusCard('yunXing')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/001.png" style="width: 25px;height: 25px;"></image>
					</view>
					运行 {{ yunXing }}
				</view>
				<view class="windMotorStatusCardDaiJi" :class="[clickFlag == 'daiJi' ? 'windMotorStatusCardDaiJiRed' : 'windMotorStatusCardDaiJi']"
				 @tap="clickWindMotorStatusCard('daiJi')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/000.png" style="width: 25px;height: 25px;"></image>
					</view>
					待机 {{ daiJi }}
				</view>
				<view class="windMotorStatusCardJianXiu" :class="[clickFlag == 'jianXiu' ? 'windMotorStatusCardJianXiuRed' : 'windMotorStatusCardJianXiu']"
				 @tap="clickWindMotorStatusCard('jianXiu')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/004.png" style="width: 25px;height: 25px;"></image>
					</view>
					检修 {{ jianXiu }}
				</view>
				<view class="windMotorStatusCardGuZhang" :class="[clickFlag == 'guZhang' ? 'windMotorStatusCardGuZhangRed' : 'windMotorStatusCardGuZhang']"
				 @tap="clickWindMotorStatusCard('guZhang')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/002.png" style="width: 25px;height: 25px;"></image>
					</view>
					故障 {{ guZhang }}
				</view>
				<view class="windMotorStatusCardXianDian" :class="[clickFlag == 'xianDian' ? 'windMotorStatusCardXianDianRed' : 'windMotorStatusCardXianDian']"
				 @tap="clickWindMotorStatusCard('xianDian')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/005.png" style="width: 25px;height: 25px;"></image>
					</view>
					限电 {{ xianDian }}
				</view>
				<view class="windMotorStatusCardShouLei" :class="[clickFlag == 'shouLei' ? 'windMotorStatusCardShouLeiRed' : 'windMotorStatusCardShouLei']"
				 @tap="clickWindMotorStatusCard('shouLei')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/007.png" style="width: 25px;height: 25px;"></image>
					</view>
					受累 {{ shouLei }}
				</view>
				<view class="windMotorStatusCardLiXian" :class="[clickFlag == 'liXian' ? 'windMotorStatusCardLiXianRed' : 'windMotorStatusCardLiXian']"
				 @tap="clickWindMotorStatusCard('liXian')">
					<view class="windMotorStatusCardIcon">
						<image src="../../static/picture/006.png" style="width: 25px;height: 25px;"></image>
					</view>
					离线 {{ liXian }}
				</view>
			</view>
			<!-- 轮播圆点-->
			<swiper class="card-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			 indicator-active-color="#F14E51" :current="cardCur">
				<swiper-item v-for="(item, index) in windFielddata" :key="index" :class="cardCur == index ? 'cur' : ''">
					<view class="swiper-item"></view>
				</swiper-item>
			</swiper>
			<!-- 轮播卡片 -->
			<view class="windMotorMatrixContainer" :style="{ height: windMotorMatrixContainerHeight }">
				<swiper id="swiper1" class="screen-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="false"
				 :circular="false" :autoplay="false" interval="5000" duration="500" :style="{ height: windMotorMatrixContainerHeight }"
				 :current="cardCur" @change="cardSwiper">
					<swiper-item v-for="(item, index) in windFielddata" :key="index">
						<scroll-view scroll-y scroll-with-animation class="scrollList" :style="{ height: windMotorMatrixContainerHeight }">
							<view class="windMotorMatrixList" :style="{ height: windMotorMatrixListHeight }">
								<view class="windMotorMatrixDetail" v-for="(item2, index2) in windMotorMatrixDetail" :key="index2" :style="{ 'background-color': detailBackgroundColor[index2] }">
									<view class="windMotorMatrixDetailIcon">
										<image :src="'../../static/picture/' + item2.icon + '.png'" style="width: 25px;height: 25px;"></image>
									</view>
									<view class="windMotorMatrixDetailSpeed">{{ item2.speed }}m/s</view>
									<view class="windMotorMatrixDetailId">{{ item2.id }}</view>
									<view class="windMotorMatrixDetailPower">{{ item2.power }}kw</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 切换轮播卡片的提示框 -->
			<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
				<view class="cu-dialog">
					<view class="padding-xl bg-black">{{ modalWindStationName }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view>
	</view>
</template>

<script>
	import drawer from '../../components/drawer/threeLineDrawer.vue';
	import plusDrawer from '../../components/drawer/plusDrawer.vue';
	import sPopup from '@/s-popup';
	export default {
		components: {
			drawer: drawer,
			plusDrawer: plusDrawer,
			sPopup: sPopup
		},
		data: function() {
			return {
				conflict: false,
				address: '',
				userid: '',
				permissionsInformation: [],
				badge: 22,
				drawerList: [],
				plusDrawerList: [],
				windStationName: '',
				modalWindStationName: '',
				CustomBar: this.CustomBar,
				modalName: null,
				showCenterVisible: false,
				windStation: [],
				choiceIndex: -1,
				clickFlag: 'jieRu',
				cardCur: 0,
				dotStyle: false,
				windowWidth: '',
				leftNavigationtitle: '监视功能分组',
				windowHeight: '',
				spopupWrapperHeight: "",
				windStationListHeight: '',
				windMotorMatrixContainerHeight: '',
				windMotorMatrixListHeight: '',
				detailBackgroundColor: [],
				windMotorMatrixDetailMaHuagShan: [],
				windMotorMatrixDetail: [],
				windMotorMatrixDetailJieAll: [],
				jieRu: 0,
				yunXing: 0,
				daiJi: 0,
				jianXiu: 0,
				guZhang: 0,
				xianDian: 0,
				shouLei: 0,
				liXian: 0,
				windFielddata: [],
			};
		},
		onReady: function() {
			this.choiceIndex = -1;
			this.cardCur = 0;
			this.getProjectcollection();
		},
		onShow: function() {
			this.address = this.dataprocessing.getWindPowerStationName();
			// this.FDC = this.dataprocessing.getWindPowerStationId();
			// this.windPowerStationId = this.dataprocessing.getWindPowerStationId();

			// this.viewUserid();
			// this.monitoringAuthority();
			//this.getProjectcollection();
			// this.getWindfarmconnectioninformation();
			
		
						

		},
		created: function() {
			this.viewUserid();
			this.monitoringAuthority();

			// this.getWindfarmconnectioninformation();
			this.address = this.dataprocessing.getWindPowerStationName();
			this.FDC = this.dataprocessing.getWindPowerStationId();
			this.windPowerStationId = this.dataprocessing.getWindPowerStationId();

			this.getProjectcollection();
			this.$nextTick(function() {
				//this.getWeatherDataToday();
				//this.getWeatherData7();
			});
			this.cWidth = uni.upx2px(2000);
			this.cHeight = uni.upx2px(350);
			this.cWidth40 = uni.upx2px(5000);
			this.cHeight40 = uni.upx2px(350);

			this.windStation = this.dataprocessing.getWindPowerStationNameByNames(this.address);

			//this.windStationName = this.windStation[0].replace('风电场', '');

			this.windStationListHeight = this.windStation.length * 50 + 40 + 'px';
			this.spopupWrapperHeight = this.windStation.length * 50 + 90 + 'px';
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windMotorMatrixContainerHeight = this.windowHeight - 300 + 'px';
			this.windMotorMatrixDetailAll = this.windMotorMatrixDetailMaHuagShan;
			this.windMotorMatrixDetail = this.windMotorMatrixDetailAll;
			this.windMotorMatrixListHeight =
				'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + (Math.ceil(this.windMotorMatrixDetail.length /
					4) * 1 - 0.5) + '%)';
			//this.getWindMotorStatusCard();
			//this.getBackgroundColor();
		},
		computed: {
			backStageIp: function() {
				return this.$store.state.wholeSituationBackStageIp;
			},
			backStagePort: function() {
				return this.$store.state.wholeSituationBackStagePort;
			},
			windpowerstationNameToId: function() {
				return this.$store.state.windpowerstationNameToId;
			}
		},
		methods: {
			viewUserid: function() {
				this.plusDrawerList = uni.getStorageSync('plusList');
			},
			monitoringAuthority: function() {
				this.drawerList = uni.getStorageSync('leftlist1');
			},
			getProjectcollection: function() {
				let _this = this;
				console.log(this.FDC)
				uni.request({
					url: 'http://' + this.backStageIp + ':' + this.backStagePort + '/GyeeMatrixController/GyeeMatrixList?keyid=' +
						this.FDC,
					data: {},
					method: 'GET',
					success: function(res) {
						_this.windFielddata = res.data.data
						console.log(_this.windFielddata);
						if (_this.windFielddata.length > 0) {
							_this.FDC = _this.windFielddata[0].id;
							_this.getWindfarmconnectioninformation();
							_this.windStationName = _this.windFielddata[0].name.replace('风电场', '');
							_this.modalWindStationName = _this.windFielddata[0].name.replace('风电场', '');
						}

					},
					fail: () => {
						_this.tips = '网络错误，小程序端请检查合法域名';
					},
				});
			},
			getWindfarmconnectioninformation: function() {
				let _this = this;

				if (undefined != _this.socketTask && null != _this.socketTask) {

					uni.closeSocket({
						url: _this.socketTask.webUrl,
						complete: function() {
							console.log('WebSocket 已关闭！');
							_this.execonnection();
						}
					});
				} else {
					_this.execonnection();
				}





			},
			execonnection: function() {
				let _this = this;
				if (undefined != _this.FDC && null != _this.FDC) {

					if (_this.FDC.substring(3, 6) == "FDC") {
						_this.socketTask = uni.connectSocket({
							// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
							url: 'ws://' + this.backStageIp + ':' + this.backStagePort +
								'/websocket/pageNumber_4/functionNumber_2/wp_' + _this.FDC,
							success(data) {
								console.log('websocket连接成功');
							}
						});

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

						// 注：只有连接正常打开中 ，才能正常收到消息
						_this.socketTask.onMessage(res => {
							//console.log("收到服务器内容：" + res.data);
							let json = JSON.parse(res.data);
							// _this.windMotorMatrixDetail = res.data;
							_this.windMotorMatrixDetail = json;
							_this.windMotorMatrixDetailAll = _this.windMotorMatrixDetail;
							_this.getBackgroundColor();
							_this.getWindMotorStatusCard();
							console.log(_this.windMotorMatrixDetail)
						});
					});
				}



			},
			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');
			},
			openDrawer: function() {
				if (this.$refs.drawer != undefined) {
					//this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
					this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList, this.leftNavigationtitle);
				} else {

				}
			},
			openPlusDrawer(e) {
				
				this.conflict = false;
				this.modalName = e.currentTarget.dataset.target;
				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
				this.FDC = this.dataprocessing.getWindPowerStationId();
				
			},
			closePlusDrawer() {
				this.conflict = false;
				this.modalName = null;
				this.$refs.plusDrawer.hideModal(this.modalName);
			},
			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);
			},
			showCardModal(modalName) {
				this.modalName = modalName;
			},
			hideCardModal(e) {
				this.modalName = null;
			},
			choiceWindStation: function(item, index) {
				this.choiceIndex = index;
				this.windStationName = item.name.replace('风电场', '');
				this.modalWindStationName = item.name.replace('风电场', '');
				//this.address = item;
				//this.pushWindPowerStationNameToSessionStorage(item);
				let _this = this;
				setTimeout(function() {
					// _this.hideModal();
					_this.showCenterVisible = false;
					_this.choiceIndex = -1;
					_this.cardCur = index;
				}, 1000);
				this.FDC = item.id;
				this.getWindfarmconnectioninformation();
				this.getWindMotorStatusCard();
				this.getBackgroundColor();
			},
			getWindMotorStatusCard: function() {
				this.jieRu = 0;
				this.yunXing = 0;
				this.daiJi = 0;
				this.jianXiu = 0;
				this.guZhang = 0;
				this.xianDian = 0;
				this.shouLei = 0;
				this.liXian = 0;
				this.jieRu = this.windMotorMatrixDetailAll.length;
				for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
					if (this.windMotorMatrixDetailAll[i].icon == '001') {
						this.yunXing++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '000') {
						this.daiJi++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '004') {
						this.jianXiu++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '002') {
						this.guZhang++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '005') {
						this.xianDian++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '007') {
						this.shouLei++;
					}
					if (this.windMotorMatrixDetailAll[i].icon == '003') {
						this.liXian++;
					}
				}
			},
			clickWindMotorStatusCard: function(clickFlag) {
				this.clickFlag = clickFlag;
				if (clickFlag == 'jieRu') {
					this.windMotorMatrixDetail = this.windMotorMatrixDetailAll;
					this.getBackgroundColor();
				}
				if (clickFlag == 'yunXing') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '001') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'daiJi') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '000') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'jianXiu') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '004') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'guZhang') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '002') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'xianDian') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '005') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'shouLei') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '008') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
				if (clickFlag == 'liXian') {
					this.windMotorMatrixDetail = [];
					for (let i = 0; i < this.windMotorMatrixDetailAll.length; i++) {
						if (this.windMotorMatrixDetailAll[i].icon == '006') {
							this.windMotorMatrixDetail.push(this.windMotorMatrixDetailAll[i]);
						}
					}
					this.windMotorMatrixListHeight =
						'calc(' + Math.ceil(this.windMotorMatrixDetail.length / 4) * 40 + 'px + ' + Math.ceil(this.windMotorMatrixDetail
							.length / 4) * 1 + '%)';
					this.getBackgroundColor();
				}
			},
			cardSwiper(e) {
				let _this = this;
				this.cardCur = e.detail.current;
				for (let i = 0; i < this.windFielddata.length; i++) {
					if (this.cardCur == i) {

						if (this.windFielddata[i].name.search('风电场') != -1) {

							this.windStationName = this.windFielddata[i].name.replace('风电场', '');
						} else {
							this.windStationName = this.windFielddata[i].name;

						}
						this.FDC = this.windFielddata[i].id;
						this.modalWindStationName = this.windFielddata[i].name;
						this.windMotorMatrixDetailAll = this.windMotorMatrixDetailMaHuagShan;
						this.getWindfarmconnectioninformation();
						this.getWindMotorStatusCard();
						this.clickWindMotorStatusCard(this.clickFlag);
						this.getBackgroundColor();
						this.showCardModal('Modal');
						setTimeout(function() {
							_this.hideCardModal();
						}, 1000);
					}
				}
			},
			getBackgroundColor: function() {
				this.detailBackgroundColor = [];
				for (let i = 0; i < this.windMotorMatrixDetail.length; i++) {
					if (this.windMotorMatrixDetail[i].icon == '000') {
						this.detailBackgroundColor.push('#00E086');
					}
					if (this.windMotorMatrixDetail[i].icon == '001') {
						this.detailBackgroundColor.push('#2675F6');
					}
					if (this.windMotorMatrixDetail[i].icon == '002') {
						this.detailBackgroundColor.push('#F14E51');
					}
					if (this.windMotorMatrixDetail[i].icon == '004') {
						this.detailBackgroundColor.push('#FF6B3E');
					}
					if (this.windMotorMatrixDetail[i].icon == '003') {
						this.detailBackgroundColor.push('#686868');
					}
					if (this.windMotorMatrixDetail[i].icon == '007') {
						this.detailBackgroundColor.push('#41346C');
					}
					if (this.windMotorMatrixDetail[i].icon == '005') {
						this.detailBackgroundColor.push('#CC3399');
					}
					if (this.windMotorMatrixDetail[i].icon == '006') {
						this.detailBackgroundColor.push('#686868');
					}
				}
			}
		}
	};
</script>

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

	/* body {
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
		font-size: 20px;
		color: silver;
		background: #000;
	} */

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

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

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

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

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

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

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

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

	.windStationNameAndChoice {
		clear: both;
		width: 100%;
		height: 50px;
		/* border: 1px solid red; */
	}

	.windStationName {
		width: 70%;
		height: 100%;
		float: left;
		line-height: 50px;
		font-size: 16px;
		margin-left: 4%;
	}

	.windStationChoice {
		width: 20%;
		height: 100%;
		float: right;
		text-align: right;
		line-height: 50px;
		font-size: 10px;
		margin-right: 9px;
	}

	.windStationList {
		width: 100%;
		height: 290px;
	}

	.windStationItemContainer {
		width: 100%;
	}

	.windStationItemContainerBlack {
		width: 100%;
		background-color: grey;
		color: white;
	}

	.windStationItem {
		width: 80%;
		height: 50px;
		border-bottom: 1px solid #c8c8c8;
		text-align: left;
		line-height: 50px;
		margin-left: 10%;
		color: #333333;
	}

	.cu-dialog {
		width: 70%;
	}

	.cu-bar .content {
		width: 100%;
		margin-left: 10%;
	}

	.windMotorStatusContainer {
		width: 95%;
		height: 120px;
		background-color: #242424;
		color: white;
		font-size: 10px;
		margin-left: 2.5%;
	}

	.windMotorStatusCardJieRu {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #c2c2c2;
		line-height: 45px;
	}

	.windMotorStatusCardYunXing {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #2675f6;
		line-height: 45px;
	}

	.windMotorStatusCardDaiJi {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #00e086;
		line-height: 45px;
	}

	.windMotorStatusCardJianXiu {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #ff6b3e;
		line-height: 45px;
	}

	.windMotorStatusCardGuZhang {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #f14e51;
		line-height: 45px;
	}

	.windMotorStatusCardXianDian {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #cc3399;
		line-height: 45px;
	}

	.windMotorStatusCardShouLei {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #41346c;
		line-height: 45px;
	}

	.windMotorStatusCardLiXian {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #686868;
		line-height: 45px;
	}

	.windMotorStatusCardIcon {
		width: 25px;
		height: 25px;
		margin-top: 10px;
		float: left;
	}

	.windMotorStatusCardJieRuRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #c2c2c2;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardYunXingRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #2675f6;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardDaiJiRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #00e086;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardJianXiuRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #ff6b3e;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardGuZhangRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #f14e51;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardXianDianRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #cc3399;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardShouLeiRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #41346c;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.windMotorStatusCardLiXianRed {
		width: 22%;
		height: 45px;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		float: left;
		background-color: #686868;
		line-height: 45px;
		color: black;
		/* border: 1px solid red; */
	}

	.card-swiper {
		height: 40px !important;
	}

	.windMotorMatrixContainer {
		width: 95%;
		height: 400px;
		background-color: #242424;
		margin-left: 2.5%;
	}

	.windMotorMatrixList {
		width: 100%;
		height: calc(900px + 20%);
	}

	.windMotorMatrixDetail {
		width: 24%;
		height: 40px;
		margin: 0.5%;
		float: left;
		color: white;
	}

	.windMotorMatrixDetailIcon {
		width: 25px;
		height: 25px;
		float: left;
	}

	.windMotorMatrixDetailSpeed {
		width: calc(100% - 26px);
		height: 25px;
		float: left;
		text-align: right;
		line-height: 25px;
		font-size: 10px;
		margin-right: 1px;
	}

	.windMotorMatrixDetailId {
		width: 20px;
		height: 20px;
		float: left;
		line-height: 10px;
		text-align: left;
		font-size: 4px;
		margin-left: 3px;
	}

	.windMotorMatrixDetailPower {
		width: calc(100% - 29px);
		height: 20px;
		float: left;
		line-height: 10px;
		text-align: right;
		font-size: 10px;
		margin-right: 1px;
	}

	/* .center-popup {
		
		// #ifdef H5
		/deep/.s-popup-wrapper {
			width: 500rpx;
			height: 500rpx;
			background-color: #f0f0f0;
		}
		// #endif
	} */
	.s-popup-wrapper {
		width: 500rpx;
		background-color: #f0f0f0;

	}

	.s-popup-title {
		width: 100%;
		height: 50px;
		background-color: #211E21;
	}

	.s-popup-word {
		width: calc(100% - 65px);
		height: 50px;
		font-size: 10px;
		color: white;
		line-height: 50px;
		float: left;
		margin-left: 25px;
	}

	.s-popup-cha {
		width: 40px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		float: right;
		font-size: 24px;
	}
</style>