|
|
@@ -2,7 +2,7 @@
|
|
|
<view class="content">
|
|
|
<view class="top">
|
|
|
<view class="threeLine" @tap="openDrawer">
|
|
|
- <image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 10px;margin-left: 10px;"></image>
|
|
|
+ <image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
|
|
|
</view>
|
|
|
<view class="text">
|
|
|
<view class="notice">
|
|
|
@@ -20,6 +20,52 @@
|
|
|
<div>
|
|
|
<drawer ref="drawer"></drawer>
|
|
|
</div>
|
|
|
+ <!--时间组件-->
|
|
|
+ <view class="time">
|
|
|
+ <view class="timeText">推荐时间</view>
|
|
|
+ <view class="timeIcon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--电量卡片-->
|
|
|
+ <view class="electricityCard">
|
|
|
+ <view class="allDayLong">安全天数:</view>
|
|
|
+ <view class="installedCapacity">装机容量:</view>
|
|
|
+ <view class="preissue">预测发电量:</view>
|
|
|
+ <view class="dayHair">日发电量:</view>
|
|
|
+ <view class="internet">上网电量:</view>
|
|
|
+ </view>
|
|
|
+ <!--风速卡片-->
|
|
|
+ <view class="speedPower">
|
|
|
+ <view class="averageSpeed">
|
|
|
+ <view class="averageSpeedText">平均风速</view>
|
|
|
+ <view class="averageSpeedmaxmin">
|
|
|
+ <view class="averageSpeedmin">min</view>
|
|
|
+ <view class="averageSpeedmax">max</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="forecastSpeed">
|
|
|
+ <view class="forecastSpeedText">预测风速</view>
|
|
|
+ <view class="forecastSpeedmaxmin">
|
|
|
+ <view class="forecastSpeedmin">min</view>
|
|
|
+ <view class="forecastSpeedmax">max</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="actualPower">
|
|
|
+ <view class="actualPowerText">实际功率</view>
|
|
|
+ <view class="actualPowermaxmin">
|
|
|
+ <view class="actualPowermin">min</view>
|
|
|
+ <view class="actualPowermax">max</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="theoreticalPower">
|
|
|
+ <view class="theoreticalPowerText">理论功率</view>
|
|
|
+ <view class="theoreticalPowermaxmin">
|
|
|
+ <view class="theoreticalPowermin">min</view>
|
|
|
+ <view class="theoreticalPowermax">max</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- <view class="details">
|
|
|
<view class="detailsText" @tap="common.navTo('/components/detail/Detail')"> 详情 〉</view>
|
|
|
</view> -->
|
|
|
@@ -36,8 +82,9 @@ export default {
|
|
|
return{
|
|
|
badge: 22,
|
|
|
drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
|
|
|
- inconList:["form","favor","question","edit"]
|
|
|
-
|
|
|
+ inconList:["form","favor","question","edit"],
|
|
|
+ minaverageSpeed:'12',
|
|
|
+ maxaverageSpeed:'25'
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
@@ -56,49 +103,236 @@ page {
|
|
|
}
|
|
|
.top {
|
|
|
width: 100%;
|
|
|
- height: 105upx;
|
|
|
+ height: 95upx;
|
|
|
padding-top: 5upx;
|
|
|
- background-color: #3D6C8A;
|
|
|
+ background-color: #E93131;
|
|
|
}
|
|
|
.threeLine {
|
|
|
width: 50px;
|
|
|
- height: 50px;
|
|
|
+ height: 45px;
|
|
|
float: left;
|
|
|
}
|
|
|
.text {
|
|
|
width: calc(100% - 100px);
|
|
|
- height: 50px;
|
|
|
+ height: 45px;
|
|
|
float: left;
|
|
|
color: white;
|
|
|
- line-height: 50px;
|
|
|
+ line-height: 45px;
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
.notice{
|
|
|
width: 50px;
|
|
|
- height: 50px;
|
|
|
+ height: 45px;
|
|
|
float: left;
|
|
|
}
|
|
|
.plus {
|
|
|
width: 50px;
|
|
|
- height: 50px;
|
|
|
+ height: 45px;
|
|
|
float: right;
|
|
|
color: white;
|
|
|
font-size: 35px;
|
|
|
- line-height: 50px;
|
|
|
+ line-height: 45px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-.details{
|
|
|
+.time{
|
|
|
+ margin-top: 10px;
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
- background-color: #0081FF;
|
|
|
float: left;
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
-.detailsText{
|
|
|
+.timeText{
|
|
|
+ width: 70%;
|
|
|
+ height: 50px;
|
|
|
+ float: left;
|
|
|
line-height: 50px;
|
|
|
- float: right;
|
|
|
- margin-right: 20px;
|
|
|
- font-size: 18px;
|
|
|
- color: white;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-left: 7px;
|
|
|
+}
|
|
|
+.timeIcon{
|
|
|
+ width: 25%;
|
|
|
+ height: 50px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.electricityCard{
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ background-color: white;
|
|
|
+ float: left;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.allDayLong{
|
|
|
+ width: 47%;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 35px;
|
|
|
+ float: left;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.installedCapacity{
|
|
|
+ width: 47%;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 35px;
|
|
|
+ float: left;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.preissue{
|
|
|
+ width: 35%;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 35px;
|
|
|
+ float: left;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.dayHair{
|
|
|
+ width: 28%;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 35px;
|
|
|
+ float: left;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.internet{
|
|
|
+ width: 28%;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: white;
|
|
|
+ line-height: 35px;
|
|
|
+ float: left;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.speedPower{
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.averageSpeed{
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 24%;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+ background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
|
|
|
+ box-shadow: 2px 2px 2px #bbb;
|
|
|
+ border-radius: 3px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.forecastSpeed{
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 24%;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+ background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
|
|
|
+ box-shadow: 2px 2px 2px #bbb;
|
|
|
+ border-radius: 3px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.actualPower{
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 24%;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+ background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
|
|
|
+ box-shadow: 2px 2px 2px #bbb;
|
|
|
+ border-radius: 3px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.theoreticalPower{
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 24%;
|
|
|
+ height: 90px;
|
|
|
+ float: left;
|
|
|
+ background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
|
|
|
+ box-shadow: 2px 2px 2px #bbb;
|
|
|
+ border-radius: 3px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.averageSpeedText{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+.forecastSpeedText{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+.actualPowerText{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+.theoreticalPowerText{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+.averageSpeedmin{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.averageSpeedmax{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.forecastSpeedmin{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.forecastSpeedmax{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.actualPowermin{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.actualPowermax{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.theoreticalPowermin{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.theoreticalPowermax{
|
|
|
+ width: 50%;
|
|
|
+ height: 30px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
lizaixun
