|
@@ -6,7 +6,7 @@
|
|
:defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
:defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
|
|
|
- <u-navbar :background="background" back-icon-color="#fff" title="用电监控" title-color="#fff">
|
|
|
|
|
|
+ <u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
|
|
<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
|
|
<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
</view>
|
|
</view>
|
|
@@ -17,9 +17,12 @@
|
|
<view class="date">
|
|
<view class="date">
|
|
26
|
|
26
|
|
</view>
|
|
</view>
|
|
- <view class="week">
|
|
|
|
|
|
+ <view class="week ">
|
|
今天
|
|
今天
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="dot">
|
|
|
|
+
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item">
|
|
<view class="date">
|
|
<view class="date">
|
|
@@ -58,15 +61,76 @@
|
|
</view>
|
|
</view>
|
|
<!-- 用电量 -->
|
|
<!-- 用电量 -->
|
|
<view class="electricity-consumption">
|
|
<view class="electricity-consumption">
|
|
- <view class="number">
|
|
|
|
- 1,201,920.1
|
|
|
|
- </view>
|
|
|
|
- <view class="tab">
|
|
|
|
- 正向有功电度
|
|
|
|
|
|
+ <view class="title">
|
|
|
|
+ 用电量统计(kW·h)
|
|
</view>
|
|
</view>
|
|
- <view class="tab2">
|
|
|
|
- 正向无功电度
|
|
|
|
|
|
+ <view class="degree">
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 百万
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 0
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 拾万
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 0
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 万
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 0
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 千
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 0
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 百
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 0
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 拾
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 7
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 1
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number">
|
|
|
|
+ 7
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-text">
|
|
|
|
+ 0.1
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-number decimal">
|
|
|
|
+ 7
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
<view class="radio">
|
|
<view class="radio">
|
|
<u-radio-group v-model="value" @change="radioGroupChange">
|
|
<u-radio-group v-model="value" @change="radioGroupChange">
|
|
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
|
|
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
|
|
@@ -95,9 +159,7 @@
|
|
<view class="abnormal" v-if="false">
|
|
<view class="abnormal" v-if="false">
|
|
<view class="headline">
|
|
<view class="headline">
|
|
<view class="title">
|
|
<view class="title">
|
|
- <view class="icon">
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
|
|
+
|
|
<view class="text">
|
|
<view class="text">
|
|
异常波动
|
|
异常波动
|
|
</view>
|
|
</view>
|
|
@@ -318,6 +380,7 @@
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
+
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
page {
|
|
padding-bottom: 100rpx;
|
|
padding-bottom: 100rpx;
|
|
@@ -388,7 +451,7 @@
|
|
|
|
|
|
.item-today {
|
|
.item-today {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
background-color: rgba(255, 255, 255, 1);
|
|
-
|
|
|
|
|
|
+ position: relative;
|
|
.date {
|
|
.date {
|
|
color: rgba(22, 119, 255, 1);
|
|
color: rgba(22, 119, 255, 1);
|
|
}
|
|
}
|
|
@@ -396,6 +459,16 @@
|
|
.week {
|
|
.week {
|
|
color: rgba(16, 16, 16, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
}
|
|
}
|
|
|
|
+ .dot{
|
|
|
|
+ width: 10rpx;
|
|
|
|
+ height: 10rpx;
|
|
|
|
+ background-color: rgba(255,150,0,1);
|
|
|
|
+ border-radius: 999px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: -5rpx;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -403,56 +476,73 @@
|
|
.electricity-consumption {
|
|
.electricity-consumption {
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
padding: 40rpx 32rpx 0rpx;
|
|
padding: 40rpx 32rpx 0rpx;
|
|
- border-radius: 0px 8px 8px 8px;
|
|
|
|
|
|
+ border-radius: 8px;
|
|
margin: 24rpx 32rpx 0;
|
|
margin: 24rpx 32rpx 0;
|
|
position: relative;
|
|
position: relative;
|
|
-
|
|
|
|
- .number {
|
|
|
|
- border-radius: 8px;
|
|
|
|
- background-color: rgba(238, 238, 238, 1);
|
|
|
|
- padding: 26rpx 32rpx;
|
|
|
|
- text-align: right;
|
|
|
|
- color: rgba(22, 119, 255, 1);
|
|
|
|
- font-size: 72rpx;
|
|
|
|
|
|
+ .title{
|
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
|
+ font-size: 36rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .tab {
|
|
|
|
- width: 240rpx;
|
|
|
|
- height: 0;
|
|
|
|
- border-width: 0px 48rpx 72rpx 0px;
|
|
|
|
- border-radius: 8px 8px 0 0;
|
|
|
|
- border-style: none solid solid none;
|
|
|
|
- border-color: transparent transparent #fff;
|
|
|
|
- position: absolute;
|
|
|
|
- top: -72rpx;
|
|
|
|
- left: 0rpx;
|
|
|
|
- right: 0rpx;
|
|
|
|
- color: #101010;
|
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
|
- // font-size: 32rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 72rpx;
|
|
|
|
- z-index: 999;
|
|
|
|
- text-indent: 16rpx;
|
|
|
|
|
|
+ .degree{
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-top: 32rpx;
|
|
|
|
+ .item{
|
|
|
|
+ margin-right: 6rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .item-text{
|
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
|
+ }
|
|
|
|
+ .item-number{
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ width: 72rpx;
|
|
|
|
+ height: 96rpx;
|
|
|
|
+ background-color: rgba(16,16,16,1);
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 72rpx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .decimal{
|
|
|
|
+ background-color: #900005;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
|
|
- .tab2 {
|
|
|
|
- width: 240rpx;
|
|
|
|
- height: 0;
|
|
|
|
- border-width: 0px 48rpx 72rpx 0px;
|
|
|
|
- border-radius: 8px 8px 0 0;
|
|
|
|
- border-style: none solid solid none;
|
|
|
|
- border-color: transparent transparent #D4DBE4;
|
|
|
|
- position: absolute;
|
|
|
|
- top: -72rpx;
|
|
|
|
- left: 210rpx;
|
|
|
|
- right: 0rpx;
|
|
|
|
- color: #777777;
|
|
|
|
- // font-size: 32rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 72rpx;
|
|
|
|
- text-indent: 16rpx;
|
|
|
|
- }
|
|
|
|
|
|
+ // .tab {
|
|
|
|
+ // width: 240rpx;
|
|
|
|
+ // height: 0;
|
|
|
|
+ // border-width: 0px 48rpx 72rpx 0px;
|
|
|
|
+ // border-radius: 8px 8px 0 0;
|
|
|
|
+ // border-style: none solid solid none;
|
|
|
|
+ // border-color: transparent transparent #fff;
|
|
|
|
+ // position: absolute;
|
|
|
|
+ // top: -72rpx;
|
|
|
|
+ // left: 0rpx;
|
|
|
|
+ // right: 0rpx;
|
|
|
|
+ // color: #101010;
|
|
|
|
+ // color: rgba(16, 16, 16, 1);
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // line-height: 72rpx;
|
|
|
|
+ // z-index: 999;
|
|
|
|
+ // text-indent: 16rpx;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .tab2 {
|
|
|
|
+ // width: 240rpx;
|
|
|
|
+ // height: 0;
|
|
|
|
+ // border-width: 0px 48rpx 72rpx 0px;
|
|
|
|
+ // border-radius: 8px 8px 0 0;
|
|
|
|
+ // border-style: none solid solid none;
|
|
|
|
+ // border-color: transparent transparent #D4DBE4;
|
|
|
|
+ // position: absolute;
|
|
|
|
+ // top: -72rpx;
|
|
|
|
+ // left: 210rpx;
|
|
|
|
+ // right: 0rpx;
|
|
|
|
+ // color: #777777;
|
|
|
|
+ // text-align: center;
|
|
|
|
+ // line-height: 72rpx;
|
|
|
|
+ // text-indent: 16rpx;
|
|
|
|
+ // }
|
|
|
|
|
|
.radio {
|
|
.radio {
|
|
margin-top: 24rpx;
|
|
margin-top: 24rpx;
|