esswisdom_wx/pages/monitor/index.wxml

<!--pages/monitor/index.wxml-->
<view class="monitor">
  <view class="navigation-container" style="{{'height: ' + navStatusBarHeight +'px'}}">
  <!--空白来占位状态栏-->
  <view style="{{'height: ' + statusBarHeight +'px'}}"></view>
  <!--自定义导航栏-->
  <view class="navigation-bar" style="{{'height:' + navBarHeight +'px'}}">
    <view class="nav-title" style="height: 100%">
      <view class="bg-logo">
        <t-icon name="chevron-left" size="24" color="#222" data-name="chevron-left" bind:tap="onIconTap" />
      </view>
    </view>
    <view class="title">设备监控</view>
  </view>
</view>
<view style="{{'height: ' + navStatusBarHeight +'px'}}"></view>
<view class="tabs">
<view class="tabs_" data-index="1" bind:tap="ontabs">
<view style="{{tabsindex==1?'color:#222':'color:#fff'}}">PCS</view>
<image class="underline" wx:if="{{tabsindex==1}}" src="https://esos-iot.com/wx_images/underline.png" mode=""/>
</view>
<view class="tabs_" data-index="2" bind:tap="ontabs">
<view style="{{tabsindex==2?'color:#222':'color:#fff'}}">电表</view> 
  <image class="underline" wx:if="{{tabsindex==2}}" src="https://esos-iot.com/wx_images/underline.png" mode=""/>

</view>
<view class="tabs_" data-index="3" bind:tap="ontabs">
<view style="{{tabsindex==3?'color:#222':'color:#fff'}}">BMS</view>
  <image class="underline" wx:if="{{tabsindex==3}}" src="https://esos-iot.com/wx_images/underline.png" mode=""/>

</view>
</view>
<view class="box" wx:if="{{tabsindex==1}}">
<view class="box_">
  <view class="data_box" style="background-image: url({{img_path}});background-size: 100% 100%; background-repeat: no-repeat;">
<view>运行状态</view>
<view class="realtime">
<view class="realtime_left">
        <view><text class="realtime_text">充电</text></view>  
     <view class="realtime_title">工作状态</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">并网</text></view>  
     <view class="realtime_title">并网状态</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">正常</text></view>  
     <view class="realtime_title">故障状态</view>    
      </view>
</view>
 </view>
<view class="power">
<view class="power_">
<view>28.0kw</view>
<view>总有功功率</view>
</view>
<view class="power_">
<view>-2.0kvar</view>
<view>总无功功率</view>
</view>
<view class="power_">
<view>28.0KVA</view>
<view>总视在功功率</view>
</view>
</view>
<view class="power">
<view class="power_1">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/power1.png" mode=""/>
<view>
  <view>1.00</view>
<view>功率因数</view>
</view>

</view>
<view class="power_1">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/monitor.png" mode=""/>

<view>
<view>50.02H2</view>
<view>交流频率</view>
</view>
</view>
</view>

</view>
</view>
<view class="box" wx:if="{{tabsindex==2}}">
  <view class="box_">
  <view class="data_box" style="background-image: url({{img_path}});background-size: 100% 100%; background-repeat: no-repeat;">
<view>功率</view>
<view class="realtime">
<view class="realtime_left">
        <view><text class="realtime_text">-</text></view>  
     <view class="realtime_title">A相功率</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">-</text></view>  
     <view class="realtime_title">B相功率</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">-</text></view>  
     <view class="realtime_title">C相功率</view>    
      </view>
</view>
 </view>
 
<view class="power">
<view class="power_1">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/power.png" mode=""/>
<view>
  <view>-92.0kw</view>
<view>总有功功率</view>
</view>

</view>
<view class="power_1">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/communication.png" mode=""/>

<view>
<view>正常</view>
<view>与EMS通信</view>
</view>
</view>
</view>
<view class="charge">日正向总电能(0.00kWh)</view>
<view class="discharge">
 <view class="dischargebox">
  <view>1</view>
  <view>尖</view>
 </view>
 <view class="dischargebox">
  <view>2</view>
  <view>峰</view>
 </view> 
 <view class="dischargebox">
  <view>3</view>
  <view>平</view>
 </view> <view class="dischargebox">
  <view>4</view>
  <view>谷</view>
 </view>
</view> 
<view class="charge">日反向总电能(0.00kWh)</view>
<view class="discharge">
 <view class="dischargebox">
  <view>1</view>
  <view>尖</view>
 </view>
 <view class="dischargebox">
  <view>2</view>
  <view>峰</view>
 </view> 
 <view class="dischargebox">
  <view>3</view>
  <view>平</view>
 </view> <view class="dischargebox">
  <view>4</view>
  <view>谷</view>
 </view>
</view> 
<view class="charge">累计正向总电能(17，432.00kWh)</view>
<view class="discharge">
 <view class="dischargebox">
  <view>1</view>
  <view>尖</view>
 </view>
 <view class="dischargebox">
  <view>2</view>
  <view>峰</view>
 </view> 
 <view class="dischargebox">
  <view>3</view>
  <view>平</view>
 </view> <view class="dischargebox">
  <view>4</view>
  <view>谷</view>
 </view>
</view> 
<view class="charge">累计反向总电能(17，432.00kWh)</view>
<view class="discharge">
 <view class="dischargebox">
  <view>1</view>
  <view>尖</view>
 </view>
 <view class="dischargebox">
  <view>2</view>
  <view>峰</view>
 </view> 
 <view class="dischargebox">
  <view>3</view>
  <view>平</view>
 </view> <view class="dischargebox">
  <view>4</view>
  <view>谷</view>
 </view>
</view> 
</view>
</view>
<view class="box" wx:if="{{tabsindex==3}}">
  <view class="box_">
  <view class="data_box" style="background-image: url({{img_path}});background-size: 100% 100%; background-repeat: no-repeat;">
<view>运行状态</view>
<view class="realtime">
<view class="realtime_left">
        <view><text class="realtime_text">充电</text></view>  
     <view class="realtime_title">工作状态</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">并网</text></view>  
     <view class="realtime_title">并网状态</view>    
      </view>
      <view class="realtime_left">
        <view><text class="realtime_text">正常</text></view>  
     <view class="realtime_title">故障状态</view>    
      </view>
</view>
 </view>
 
<view class="power">
<view class="power_2">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/V.png" mode=""/>
<view>
  <view>747.8V</view>
<view>总电压</view>
</view>

</view>
<view class="power_2">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/A.png" mode=""/>

<view>
<view>-52.1A</view>
<view>总电流</view>
</view>
</view>
</view>
<view class="power">
<view class="power_2">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/social.png" mode=""/>
<view>
  <view>43.6%</view>
<view>SOC</view>
</view>

</view>
<view class="power_2">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/soh.png" mode=""/>

<view>
<view>98.3%</view>
<view>SOH</view>
</view>
</view>
</view>
<view class="power">
<view class="power_2">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/power.png" mode=""/>
<view>
  <view>102.9kw</view>
<view>充电限制功率</view>
</view>

</view>
<view class="power_2">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/communication.png" mode=""/>

<view>
<view>102.9kw</view>
<view>放电限制功率</view>
</view>
</view>
</view>
<view class="power">
<view class="power_2">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/7.png" mode=""/>
<view>
  <view>110.9kw</view>
<view>可充电量</view>
</view>

</view>
<view class="power_2">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/8.png" mode=""/>

<view>
<view>85.7kWh</view>
<view>可放电量</view>
</view>
</view>
</view>
<view class="power">
<view class="power_2">
<image class="power_imgaes" src="https://esos-iot.com/wx_images/9.png" mode=""/>
<view>
  <view>27℃</view>
<view>平均温度</view>
</view>

</view>
<view class="power_2">
  <image class="power_imgaes" src="https://esos-iot.com/wx_images/10.png" mode=""/>

<view>
<view>3.338V</view>
<view>平均电压</view>
</view>
</view>
</view>
 
 
</view>
</view>
</view>