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: '',
				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: [{
						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 = this.dataprocessing.getWindPowerStationName();
			this.FDC = this.dataprocessing.getWindPowerStationId();
			this.windPowerStationId = this.dataprocessing.getWindPowerStationId();

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

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

			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_we');
			},
			monitoringAuthority: function() {
				this.drawerList=uni.getStorageSync('leftlist3');
			},
			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() {
				//this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
			},
			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('风电场', '');
				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 =this.dataprocessing.getWindPowerStationNameById(item);
				
				this.dataprocessing.putWindPowerStationId(this.FDC);
			},
			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.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/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: 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>