sisMobilePhone/components/monitor/MatrixMonitor.vue

<template>
	<view>
		<!--导航栏-->
		<view class="top">
			<view class="threeLine" @tap="openDrawer">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
			</view>
			<view class="text">
				<view class="notice">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
						<view class="cu-tag looknumber">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				{{address}}
			</view>
			<view class="plus" @tap="openPlusDrawer" data-target="viewModal">+</view>
		</view>
		<!-- 抽屉组件 -->
		<div><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 @tap="showModal" data-target="DialogModal1">其他ㅤ〉</a></view>
		</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="padding-xl">
					Modal 内容。
				</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>
		<!-- 风机状态卡片 -->
		<view class="windMotorStatusContainer">
			<view class="windMotorStatusCardJieRu" :class="[clickFlag=='jieRu'?'windMotorStatusCardJieRuRed':'windMotorStatusCardJieRu']" @tap="clickWindMotorStatusCard('jieRu')">
				<view class="windMotorStatusCardIcon">
					<image src="../../static/picture/001.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/003.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/002.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/005.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/004.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/008.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 windStation" :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 windStation" :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>
</template>

<script>
	import drawer from '../../components/drawer/threeLineDrawer.vue';
	import plusDrawer from '../../components/drawer/plusDrawer.vue'
	export default{
		components: {
			drawer: drawer,
			"plusDrawer": plusDrawer,
		},
		data:function(){
			return{
				address:"",
				badge: 22,
				drawerList: [{ name: '首页' }, { name: '状态监视' }, { name: '矩阵监视' }, { name: '风场监视' }, { name: '人员监视' }],
				plusDrawerList: [{
						name: "宁夏新能源公司",
						windPowerStationId: "NINGXIAXINNENGYUANGONGSI"
					},
					{
						name: "牛首山风电场",
						windPowerStationId: "NSS_FDC"
					},
					{
						name: "香山风电场",
						windPowerStationId: "XS_FDC"
					},
					{
						name: "石板泉风电场",
						windPowerStationId: "SBQ_FDC"
					},
					{
						name: "青山风电场",
						windPowerStationId: "QS_FDC"
					},
					{
						name: "麻黄山风电场",
						windPowerStationId: "MHS_FDC"
					},
				],
				windStationName:"麻黄山",
				modalWindStationName:"",
				CustomBar: this.CustomBar,
				modalName: null,
				windStation:["麻黄山风电场","牛首山风电场","石板泉风电场","青山风电场","香山风电场"],
				choiceIndex:-1,
				clickFlag:"jieRu",
				cardCur: 0,
				dotStyle: false,
				windowWidth:"",
				windowHeight:"",
				windStationListHeight:"",
				windMotorMatrixContainerHeight:"",
				windMotorMatrixListHeight:"",
				detailBackgroundColor:[],
				windMotorMatrixDetailMaHuagShan:[
					{
						icon:"003",
						id:"A01",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A02",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A03",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A04",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A05",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A06",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A07",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A08",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A09",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A10",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A11",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A12",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A13",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A14",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A15",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A16",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A17",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A18",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A19",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A20",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A21",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A22",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A23",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A24",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A25",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A26",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A27",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A28",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"005",
						id:"A29",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A30",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A31",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A32",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A33",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A34",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"004",
						id:"A35",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A36",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A37",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A38",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A39",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A40",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"008",
						id:"A41",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A42",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A43",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A44",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A45",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A46",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A47",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A48",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A49",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A50",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A51",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A52",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"006",
						id:"A53",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A54",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A55",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A56",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A57",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A58",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"007",
						id:"A59",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A60",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A61",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A62",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A63",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A64",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A65",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A66",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A67",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A68",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A69",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A70",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"008",
						id:"A71",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A72",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A73",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A74",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A75",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A76",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"006",
						id:"A77",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A78",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A79",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A80",
						speed:"6.04",
						power:"567"
					},
				],
				windMotorMatrixDetailNiuShouShan:[
					{
						icon:"003",
						id:"A01",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A02",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A03",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A04",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A05",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A06",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A07",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A08",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A09",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A10",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A11",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A12",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A13",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A14",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A15",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A16",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"008",
						id:"A17",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A18",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A19",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A20",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A21",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A22",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A23",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A24",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A25",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A26",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A27",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A28",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"005",
						id:"A29",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A30",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A31",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A32",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A33",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A34",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"004",
						id:"A35",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A36",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A37",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A38",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A39",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A40",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A41",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A42",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A43",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A44",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A45",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A46",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A47",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A48",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A49",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A50",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A51",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A52",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"006",
						id:"A53",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A54",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A55",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A56",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A57",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A58",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"007",
						id:"A59",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A60",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A61",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A62",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A63",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A64",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"002",
						id:"A65",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A66",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A67",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A68",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A69",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A70",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"008",
						id:"A71",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A72",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A73",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A74",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A75",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A76",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"006",
						id:"A77",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A78",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A79",
						speed:"6.04",
						power:"567"
					},
					{
						icon:"003",
						id:"A80",
						speed:"6.04",
						power:"567"
					},
				],
				windMotorMatrixDetail:[],
				windMotorMatrixDetailJieAll:[],
				jieRu:0,
				yunXing:0,
				daiJi:0,
				jianXiu:0,
				guZhang:0,
				xianDian:0,
				shouLei:0,
				liXian:0
			}
		},
		// onLoad(option) {
		// 	this.option=option.option;
		// 	if(option.option=="宁夏新能源公司"){
		// 		this.windStation=["麻黄山风电场","牛首山风电场","石板泉风电场","青山风电场","香山风电场"];
		// 	}
		// 	if(option.option=="麻黄山"){
		// 		this.windStation=["麻黄山风电场","麻黄山一期","麻黄山二期","麻黄山三期"];
		// 	}
		// 	this.windStationListHeight=(this.windStation.length*50+40)+"px"
		// },
		onShow(){
			console.log("11")
			this.address = uni.getStorageSync('windpowerstationName');
		},
		created:function(){
			this.address=uni.getStorageSync('windpowerstationName');
			if(this.address=="宁夏新能源公司"){
				this.windStation=["麻黄山风电场","牛首山风电场","石板泉风电场","青山风电场","香山风电场"];
			}
			if(this.address=="麻黄山风电场"){
				this.windStation=["麻黄山风电场","麻黄山一期","麻黄山二期","麻黄山三期"];
			}
			this.windStationListHeight=(this.windStation.length*50+40)+"px"
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windMotorMatrixContainerHeight=(this.windowHeight-290)+"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();
		},
		methods:{
			openDrawer: function() {
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
			},
			openPlusDrawer(e) {
				this.modalName = e.currentTarget.dataset.target;
				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
			},
			closePlusDrawer() {
				this.modalName = null;
				this.$refs.plusDrawer.hideModal(this.modalName);
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;
				this.choiceIndex=-1;
			},
			showCardModal(modalName) {
				this.modalName = modalName;
			},
			hideCardModal(e) {
				this.modalName = null
			},
			choiceWindStation:function(item,index){
				this.choiceIndex=index;
				this.windStationName=item.replace("风电场","");
				this.modalWindStationName=item.replace("风电场","");
				let _this=this;
				setTimeout(function(){		
				　　_this.hideModal();
					_this.cardCur=index;
				},1000);				
			},
			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=="003"){
						this.yunXing++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="002"){
						this.daiJi++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="005"){
						this.jianXiu++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="004"){
						this.guZhang++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="008"){
						this.xianDian++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="007"){
						this.shouLei++;
					}
					if(this.windMotorMatrixDetailAll[i].icon=="006"){
						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=="003"){
							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=="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=="jianXiu"){
					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=="guZhang"){
					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=="xianDian"){
					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=="shouLei"){
					this.windMotorMatrixDetail=[];
					for(let i=0;i<this.windMotorMatrixDetailAll.length;i++){
						if(this.windMotorMatrixDetailAll[i].icon=="007"){
							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.windStation.length;i++){
					if(this.cardCur==i){
						if(this.address=="宁夏新能源公司"){
							this.windStationName=this.windStation[i].replace("风电场","");
							this.modalWindStationName=this.windStation[i].replace("风电场","");
						}
						if(this.address=="麻黄山风电场"){
							if(this.windStation[i].search("风电场") != -1){
								this.windStationName=this.windStation[i].replace("风电场","");
							}else{
								this.windStationName=this.windStation[i];
							}							
							this.modalWindStationName=this.windStation[i];
						}
						this.windMotorMatrixDetailAll=this.windMotorMatrixDetailMaHuagShan;
						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=="002"){
						this.detailBackgroundColor.push("#00E086");
					}
					if(this.windMotorMatrixDetail[i].icon=="003"){
						this.detailBackgroundColor.push("#2675F6");
					}
					if(this.windMotorMatrixDetail[i].icon=="004"){
						this.detailBackgroundColor.push("#F14E51");
					}
					if(this.windMotorMatrixDetail[i].icon=="005"){
						this.detailBackgroundColor.push("#FF6B3E");
					}
					if(this.windMotorMatrixDetail[i].icon=="006"){
						this.detailBackgroundColor.push("#686868");
					}
					if(this.windMotorMatrixDetail[i].icon=="007"){
						this.detailBackgroundColor.push("#41346C");
					}
					if(this.windMotorMatrixDetail[i].icon=="008"){
						this.detailBackgroundColor.push("#CC3399");
					}
				}
			}			
		}
	}
</script>

<style>
	@font-face {
		font-family:'方正兰亭细黑_GBK';
		src: url(../../static/方正兰亭细黑_GBK.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: 95upx;
		/* margin-top: 20px; */
		/* padding-top: 5upx; */
		background-color: #1F1F1F;
	}
	
	.threeLine {
		width: 50px;
		height: 45px;
		float: left;
	}
	
	.text {
		width: calc(100% - 100px);
		height: 45px;
		float: left;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		line-height: 45px;
		text-align: center;
		font-size: 18px;
	}
	
	.notice {
		width: 50px;
		height: 45px;
		float: left;
	}
	
	.plus {
		width: 50px;
		height: 45px;
		float: right;
		color: white;
		font-size: 35px;
		line-height: 45px;
		text-align: center;
	}
	.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{
		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: 14px;
		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%;
	}	
	.cu-dialog{
		width: 70%;
	}
	.cu-bar .content{
		width: 100%;
		margin-left: 10%;
	}
	.windMotorStatusContainer{
		width: 95%;
		height: 120px;
		background-color: #242424;
		color: white;
		font-size: 14px;
		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: 13px;
		margin-right: 1px;
	}
	.windMotorMatrixDetailId{
		width: 25px;
		height: 20px;
		float: left;
		line-height: 10px;
		text-align: left;
		font-size: 13px;
		margin-left: 3px;
	}
	.windMotorMatrixDetailPower{
		width: calc(100% - 29px);
		height: 20px;
		float: left;
		line-height: 10px;
		text-align: right;
		font-size: 13px;
		margin-right: 1px;
	}
</style>