|
|
@@ -78,57 +78,67 @@
|
|
|
|
|
|
<view class="main">
|
|
|
<view class="item" v-for="(item, index) in m.deviceList" :key="index" @click="toElectronicMonitoring(item)">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/energyMeter.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="equipment">
|
|
|
- <view class="equipment1 equipment-text-overflow">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- <view class="equipment2 equipment-text-overflow">
|
|
|
- <view class="companyName">
|
|
|
- {{item.installationAddressSimple}}
|
|
|
+ <view class="item-content">
|
|
|
+ <view class="equipment">
|
|
|
+ <view class="equipment1 ">
|
|
|
+ {{item.name}}
|
|
|
</view>
|
|
|
- <!-- 离线 -->
|
|
|
+
|
|
|
+ <view class="equipment2">
|
|
|
+ {{item.installationAddressSimple}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<view class="state" v-if="!item.online">
|
|
|
- <text class="off-line"></text>离线
|
|
|
+ <view class="dot off-line"></view>
|
|
|
+ <view class="text">离线</view>
|
|
|
</view>
|
|
|
- <!-- 在线 -->
|
|
|
+
|
|
|
<view class="state state2" v-else>
|
|
|
- <text class="on-line"></text>在线
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="electricity">
|
|
|
- <view class="electricity-item electricity-item-day">
|
|
|
- <view class="number">
|
|
|
- {{item.thisDayKwh}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- 今日
|
|
|
+ <view class="dot on-line"></view>
|
|
|
+ <view class="text">在线</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
- <view class="electricity-item">
|
|
|
- <view class="number">
|
|
|
- {{item.thisMonthKwh}}
|
|
|
+ <view class="electricity">
|
|
|
+ <view class="electricity-item electricity-item-day">
|
|
|
+
|
|
|
+ <view class="date">
|
|
|
+ 今日
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ {{item.thisDayKwh}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="date">
|
|
|
- 本月
|
|
|
+ <view class="electricity-item">
|
|
|
+
|
|
|
+ <view class="date">
|
|
|
+ 本月
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ {{item.thisMonthKwh}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="electricity-item">
|
|
|
- <view class="number">
|
|
|
- {{item.lastMonthKwh}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- 上月
|
|
|
+ <view class="electricity-item">
|
|
|
+
|
|
|
+ <view class="date">
|
|
|
+ 上月
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ {{item.lastMonthKwh}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <!-- 箭头 -->
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
|
|
|
- </view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -380,110 +390,117 @@
|
|
|
// 用电量
|
|
|
.main {
|
|
|
background-color: #fff;
|
|
|
+ padding: 26rpx 32rpx;
|
|
|
|
|
|
- .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);
|
|
|
+
|
|
|
+ .item:last-of-type{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ padding: 16rpx 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .equipment {
|
|
|
- width: 35%;
|
|
|
- margin-left: 8rpx;
|
|
|
-
|
|
|
- // .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 {
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+ .item-content{
|
|
|
+ width: 93%;
|
|
|
+ }
|
|
|
+ .equipment {
|
|
|
+
|
|
|
display: flex;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- .companyName{
|
|
|
- width: 45%;
|
|
|
- // white-space: nowrap;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ .equipment1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ max-width: 40%;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment2 {
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ margin-left: 16rpx;
|
|
|
+ max-width: 40%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
- .state{
|
|
|
+ }
|
|
|
+ // 状态
|
|
|
+ .state {
|
|
|
+
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(255, 123, 0, 1);
|
|
|
+ margin-left: auto;
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ margin-right: 8rpx;
|
|
|
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+ border-radius: 999px;
|
|
|
+ margin-left: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .off-line {
|
|
|
+
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-line {
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .state2 {
|
|
|
+ color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .electricity {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ margin-top:8rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .electricity-item {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(255,123,0,1);
|
|
|
- text{
|
|
|
- margin-right: 8rpx;
|
|
|
- display: inline-block;
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 999px;
|
|
|
+ align-items: center;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ .number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
}
|
|
|
- .off-line{
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
|
|
|
- background-color: rgba(255,123,0,1);
|
|
|
|
|
|
}
|
|
|
- .on-line{
|
|
|
- background-color: rgba(0,185,98,1);
|
|
|
- }
|
|
|
- }
|
|
|
- .state2{
|
|
|
- color: rgba(0,185,98,1);
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .electricity {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
- // margin-left: 8rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .electricity-item {
|
|
|
- width: 37.5%;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .electricity-item-day{
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
