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: 18px;margin-left: 10px;"></image>
			</view>
			<view class="text">
				<view class="notice">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
						<view class="cu-tag looknumber" style="margin-top: 10px;">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				<view class="textWindpowerstation">{{ address }}</view>
			</view>
			<view class="plus" @tap="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 @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 windStation" :key="index" :class="[choiceIndex==index?'windStationItemContainerBlack':'windStationItemContainer']" >
						<view class="windStationItem"  @tap="choiceWindStation(item,index)">{{item}}</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/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';
import sPopup from '@/s-popup';
export default {
	components: {
		drawer: drawer,
		plusDrawer: plusDrawer,
		sPopup:sPopup
	},
	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,
			showCenterVisible: false,
			windStation: ['麻黄山风电场', '牛首山风电场', '石板泉风电场', '青山风电场', '香山风电场'],
			choiceIndex: -1,
			clickFlag: 'jieRu',
			cardCur: 0,
			dotStyle: false,
			windowWidth: '',
			windowHeight: '',
			spopupWrapperHeight:"",
			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() {
		this.address = uni.getStorageSync('windpowerstationName');
	},
	created: function() {
		this.address = uni.getStorageSync('windpowerstationName');
		if (this.address == '宁夏新能源公司') {
			this.windStation = ['麻黄山风电场', '牛首山风电场', '石板泉风电场', '青山风电场', '香山风电场'];
			this.windStationName =this.windStation[0].replace('风电场', '');
		}
		if (this.address == '麻黄山风电场') {
			this.windStation = ['麻黄山风电场', '麻黄山一期', '麻黄山二期', '麻黄山三期'];
			this.windStationName =this.windStation[0].replace('风电场', '');
		}
		if (this.address == '牛首山风电场') {
			this.windStation = ['牛首山风电场', '牛首山一期', '牛首山二期', '牛首山三期'];
			this.windStationName =this.windStation[0].replace('风电场', '');
		}
		if (this.address == '石板泉风电场') {
			this.windStation = ['石板泉风电场', '石板泉一期', '石板泉二期', '石板泉三期'];
			this.windStationName =this.windStation[0].replace('风电场', '');
		}
		if (this.address == '香山风电场') {
			this.windStation = ['香山风电场', '香山一期', '香山二期', '香山三期'];
			this.windStationName =this.windStation[0].replace('风电场', '');
		}
		if (this.address == '青山风电场') {
			this.windStation = ['青山风电场', '青山一期', '青山二期', '青山三期'];
			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();
	},
	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.showCenterVisible=false;
				_this.choiceIndex = -1;
				_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.search('风电场') != -1) {
						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: 130upx;
	padding-top: 5upx;
	background-color: #1f1f1f;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
}

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

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

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

.plus {
	width: 50px;
	height: 45px;
	float: right;
	color: white;
	font-size: 35px;
	line-height: 45px;
	text-align: center;
	margin-top: 11px;
}
.textWindpowerstation {
	width: 180px;
	height: 45px;
	float: left;
	text-align: center;
	margin-left: 18px;
}
.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;
	margin-top: 71px;
	/* 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%;
	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: 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;
}
.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: 14px;
	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>