|
|
@@ -8,12 +8,13 @@
|
|
|
设备用电量
|
|
|
<image class="img" src="@/assets/img/refresh-line.svg" @click="getList(true)"></image>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 标签 -->
|
|
|
- <view class="tabs-box" v-if="false">
|
|
|
+ <view class="tabs-box">
|
|
|
<view class="tabs">
|
|
|
- <u-tabs :list="list" :is-scroll="false" inactive-color="#999999" active-color="#666666" :current="current" @change="change"></u-tabs>
|
|
|
+ <u-tabs :list="list" :is-scroll="false" inactive-color="#999999" active-color="#666666" :current="current"
|
|
|
+ @change="change"></u-tabs>
|
|
|
</view>
|
|
|
<view class="icon" @click="popShow=true">
|
|
|
<u-icon name="arrow-down" color="#999999"></u-icon>
|
|
|
@@ -30,15 +31,14 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tabs-options">
|
|
|
- <view class="item" v-for="(item, index) in list" :key="index"
|
|
|
- >
|
|
|
+ <view class="item" v-for="(item, index) in list" :key="index">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<view class="tatol-main">
|
|
|
<!-- 用电量合计 -->
|
|
|
- <view class="total" v-if="false">
|
|
|
+ <view class="total">
|
|
|
<view class="company">
|
|
|
<view class="name">
|
|
|
荆鹏集团
|
|
|
@@ -53,7 +53,7 @@
|
|
|
361.5
|
|
|
</view>
|
|
|
<view class="time">
|
|
|
- 昨日
|
|
|
+ 今日
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infos-item">
|
|
|
@@ -61,7 +61,7 @@
|
|
|
361.5
|
|
|
</view>
|
|
|
<view class="time">
|
|
|
- 今日
|
|
|
+ 本月
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infos-item">
|
|
|
@@ -74,7 +74,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="main">
|
|
|
<view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
|
|
|
<view class="icon">
|
|
|
@@ -91,42 +91,42 @@
|
|
|
<view class="electricity">
|
|
|
<view class="electricity-item">
|
|
|
<view class="number">
|
|
|
- {{item.yesterdayKwh}}
|
|
|
+ {{item.thisDayKwh}}
|
|
|
</view>
|
|
|
<view class="date">
|
|
|
- 昨日
|
|
|
+ 今日
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="electricity-item">
|
|
|
<view class="number">
|
|
|
- {{item.thisDayKwh}}
|
|
|
+ {{item.thisMonthKwh}}
|
|
|
</view>
|
|
|
<view class="date">
|
|
|
- 今日
|
|
|
+ 本月
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="electricity-item">
|
|
|
<view class="number">
|
|
|
- {{item.thisMonthKwh}}
|
|
|
+ {{item.lastMonthKwh}}
|
|
|
</view>
|
|
|
<view class="date">
|
|
|
- 本月
|
|
|
+ 上月
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as API from '@/apis/pagejs/energy/index.js'
|
|
|
-
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -136,17 +136,17 @@
|
|
|
companyId: '',
|
|
|
pageIndex: 1,
|
|
|
recordsTotal: 0,
|
|
|
- popShow:false,
|
|
|
+ popShow: false,
|
|
|
list: [{
|
|
|
name: '全部'
|
|
|
}, {
|
|
|
name: '荆鹏集团'
|
|
|
}, {
|
|
|
name: '青少年宫',
|
|
|
-
|
|
|
+
|
|
|
}, {
|
|
|
name: '荆州院子',
|
|
|
-
|
|
|
+
|
|
|
}],
|
|
|
current: 0
|
|
|
}
|
|
|
@@ -164,7 +164,7 @@
|
|
|
getCompanyInfoList() {
|
|
|
this.merchantList1 = [];
|
|
|
this.merchantList2 = [];
|
|
|
-
|
|
|
+
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
@@ -172,13 +172,16 @@
|
|
|
API.deviceCompanyList().then((response) => {
|
|
|
uni.hideLoading();
|
|
|
this.companyList = response.data.companyInfoList;
|
|
|
- if(this.companyList.length >3) {
|
|
|
+ if (this.companyList.length > 3) {
|
|
|
this.merchantList1.push(this.companyList.slice(0, 3));
|
|
|
this.merchantList2.push(this.companyList.slice(3));
|
|
|
} else {
|
|
|
this.merchantList1 = this.companyList;
|
|
|
}
|
|
|
- this.merchantList1.unshift({id: '', name: '全部'});
|
|
|
+ this.merchantList1.unshift({
|
|
|
+ id: '',
|
|
|
+ name: '全部'
|
|
|
+ });
|
|
|
}).catch(error => {
|
|
|
uni.showToast({
|
|
|
title: error,
|
|
|
@@ -211,7 +214,7 @@
|
|
|
...res.data.data
|
|
|
];
|
|
|
this.recordsTotal = res.data.recordsTotal;
|
|
|
-
|
|
|
+
|
|
|
}).catch(error => {
|
|
|
uni.showToast({
|
|
|
title: error,
|
|
|
@@ -239,23 +242,27 @@
|
|
|
z-index: 999;
|
|
|
width: 200rpx;
|
|
|
}
|
|
|
+
|
|
|
/deep/.u-drawer-content {
|
|
|
margin-top: 88rpx;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- .tabs-box{
|
|
|
+
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .tabs{
|
|
|
+
|
|
|
+ .tabs {
|
|
|
width: 80%;
|
|
|
}
|
|
|
- .icon{
|
|
|
+
|
|
|
+ .icon {
|
|
|
margin-left: auto;
|
|
|
margin-right: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.popup-tabs {
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
@@ -264,120 +271,137 @@
|
|
|
padding-right: 32rpx;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
font-size: 32rpx;
|
|
|
-
|
|
|
+
|
|
|
.tabs {
|
|
|
width: 80%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.tabs-options {
|
|
|
display: flex;
|
|
|
padding: 24rpx 32rpx 0;
|
|
|
flex-wrap: wrap;
|
|
|
-
|
|
|
+
|
|
|
.item {
|
|
|
width: 25%;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- // 用电量合计
|
|
|
- .total{
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(37,138,255,1) 100%);
|
|
|
- display: flex;
|
|
|
- .company{
|
|
|
- .name{
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .amount{
|
|
|
- color:#f2f4f6 ;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .infos{
|
|
|
- display: flex;
|
|
|
- margin-left: auto;
|
|
|
- .infos-item{
|
|
|
- margin-left: 32rpx;
|
|
|
- text-align: center;
|
|
|
- .number{
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .time{
|
|
|
- color:#f2f4f6 ;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 用电量
|
|
|
- .main{
|
|
|
- background-color: #fff;
|
|
|
- .item{
|
|
|
- padding: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
- .icon{
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(219,234,255,1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .img{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .equipment{
|
|
|
- width: 30%;
|
|
|
- margin-left: 16rpx;
|
|
|
- .equipment-text-overflow {
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .equipment1{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .equipment2{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- }
|
|
|
- }
|
|
|
- .electricity{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- margin-left: 48rpx;
|
|
|
- text-align: center;
|
|
|
- .electricity-item{
|
|
|
- width: 30%;
|
|
|
- .number{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .date{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ // 用电量合计
|
|
|
+ .total {
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(37, 138, 255, 1) 100%);
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .company {
|
|
|
+ .name {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ color: #f2f4f6;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ display: flex;
|
|
|
+ margin-left: auto;
|
|
|
+
|
|
|
+ .infos-item {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: #f2f4f6;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 用电量
|
|
|
+ .main {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219, 234, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment {
|
|
|
+ width: 30%;
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ // .equipment-text-overflow {
|
|
|
+ // display: -webkit-box;
|
|
|
+ // -webkit-box-orient: vertical;
|
|
|
+ // -webkit-line-clamp: 1;
|
|
|
+ // overflow: hidden;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .equipment1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .electricity {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .electricity-item {
|
|
|
+ width: 30%;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
wkyy