<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: function() {
this.address = this.dataprocessing.getWindPowerStationName();
this.FDC = this.dataprocessing.getWindPowerStationId();
this.windPowerStationId = this.dataprocessing.getWindPowerStationId();
this.viewUserid();
this.monitoringAuthority();
},
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');
},
monitoringAuthority: function() {
this.drawerList = uni.getStorageSync('leftlist1');
},
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>