mom-wx/pages/energy/energy.wxml

<view style="background-color:#E9F4EE;height: calc(100vh - 20rpx);padding-top: 20rpx;">
  <!-- <view class="top">
    <view class="heagImg">
      <image src="../../image/head.png" mode="scaleToFill" style="width: 100%;height: 100%;" />
    </view>
    <view class="name">欢迎，admin</view>
    <view class="date">{{date}}</view>
  </view> -->
  <view class="card" >
    <view class="title">单元统计</view>
    <view style="display: flex;">
      <view class="left" style="display: flex;">
        <view style="display: inline-block;width: 40%;height: 100%;text-align: center;line-height: 20vh;">
          <view style="width: 100%;height: 100%;display: flex;align-items: center;">
            <image src="../../image/icon1.png" mode="aspectFit" class="homeIcon" />
          </view>
        </view>
        <view
          style="display: inline-block;width: 50%;height: 100%;text-align: center;color: #000;vertical-align: top;display: flex;align-items: center;">
          <view>
            <view style="font-size: 42rpx;font-weight: bold;padding-bottom: 10rpx 0;">{{list.length }}个</view>
            <view style="font-size: 28rpx;">智慧单元</view>
          </view>
        </view>
      </view>
      <view class="right">
        <view style="height: 15vh;display: flex; ">
          <view style="display: inline-block;width: 25%;height: 100%;text-align: center;line-height: 20vh;">
            <view style="width: 80%;height: 100%;display: flex;align-items: center;">
              <image src="../../image/icon2.png" mode="aspectFit" class="icon2" />
            </view>
          </view>
          <view
            style="display: inline-block;width: 25%;height: 100%;text-align: center;color: #000;vertical-align: top;display: flex;align-items: center;">
            <view>
              <view style="font-size: 36rpx;font-weight: bold;padding-bottom: 10rpx 0;">{{num1}}</view>
              <view style="font-size: 22rpx;">传感器</view>
            </view>
          </view>
          <view
            style="display: inline-block;width: 50%;height: 100%;text-align: center;color: #000;vertical-align: top; ">
            <view style="position: relative;height: 20%;width: 100%; ">
            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color: #2BBC69;"></view>
              <view class="num1">在线：
              </view>
              <view class="num2">{{num1}}
              </view>

            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color: #B8C0D5;"></view>
              <view class="num1">离线：
              </view>
              <view class="num2">0
              </view>
            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color:#FA674A;"></view>
              <view class="num1">报警：
              </view>
              <view class="num2">0
              </view>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view style="height: 15vh;display: flex; ">
          <view style="display: inline-block;width: 25%;height: 100%;text-align: center;line-height: 20vh;">
            <view style="width: 80%;height: 100%;display: flex;align-items: center;">
              <image src="../../image/icon2.png" mode="aspectFit" class="icon2" />
            </view>
          </view>
          <view
            style="display: inline-block;width: 25%;height: 100%;text-align: center;color: #000;vertical-align: top;display: flex;align-items: center;">
            <view>
              <view style="font-size: 36rpx;font-weight: bold;padding-bottom: 10rpx 0;">{{num2}}</view>
              <view style="font-size: 22rpx;">控制器</view>
            </view>
          </view>
          <view
            style="display: inline-block;width: 50%;height: 100%;text-align: center;color: #000;vertical-align: top; ">
            <view style="position: relative;height: 20%;width: 100%; ">
            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color: #2BBC69;"></view>
              <view class="num1">在线：
              </view>
              <view class="num2">{{num2}}
              </view>
            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color: #B8C0D5;"></view>
              <view class="num1">离线：
              </view>
              <view class="num2">0
              </view>
            </view>
            <view style="position: relative;height: 20%;width: 100%; ">
              <view class="dot" style="background-color:#FA674A;"></view>
              <view class="num1">报警：
              </view>
              <view class="num2">0
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="card-list">
    <view class="card2" wx:for="{{list}}" wx:key="objid" data-id="{{item.collectDeviceId}}" bindtap="goDetail">
      <view class="value">{{item.collectDeviceId}}</view>
      <view>
        <image class="icon" src="../../image/icon2.png" />
      </view>

      <view class="label">{{item.settingAddress}}</view>

      <view class="progress">
        <view class="progress-bar"></view>
      </view>
    </view>
  </view>
</view>