movecar_wx/pages/details/index.wxml

<view class="details">
<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="detail_s">设备详情</view>
  </view>
</view>
<view>
<view style="{{'height: ' + navStatusBarHeight +'px'}}"></view>
  <t-tabs value="{{tapindex}}" split="{{fasle}}" bind:change="onTabsChange" t-class="custom-tabs">
  <t-tab-panel label="电量" value="0" />
  <t-tab-panel label="充放电功率" value="1" />
  <t-tab-panel label="充放电时间" value="2" />
</t-tabs>
<swiper class="swiper" current="{{tapindex}}" bindchange="ontop">
    <swiper-item>
      <view class="proportion" wx:if="{{tapindex==0}}">
<view class="proportion_">

<view class="proportion_c" style="width:{{(Electricitylevel.total.sumchargeTotal / (Electricitylevel.total.sumchargeTotal+Electricitylevel.total.sumdischargeTotal)) * 100+'%'}}"></view>
</view>
<view class="cumulative">
 <view class="cumulative_1">
 <view class="cumulative_2"></view>
 <view class="cumulative_3">
 <view>累计充电量</view>
 <view>{{ Electricitylevel.total.sumchargeTotal }} kwh</view>
 </view>
 </view>
 <view class="cumulative_1">
 <view class="cumulative_22"></view>
 <view class="cumulative_3">
 <view>累计放电量</view>
 <view>{{ Electricitylevel.total.sumdischargeTotal }} kwh</view>
 </view>
 </view>
</view>
<view class="datelabel" bind:tap="onlabel">
<view class="datelabel_1" data-index="1" style="{{labelindex==1?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">日</view>
<view class="datelabel_2" data-index="2" style="{{labelindex==2?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">月</view>
<view class="datelabel_3" data-index="3" style="{{labelindex==3?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">年</view>
</view>
<view class="switch1">
<!-- <view class="switch_1" bind:tap="Lastday"><t-icon name="chevron-left" size="18" color="#222" data-name="chevron-left"/></view> -->
<view class="switch_2_" bind:tap="handleCalendar"><view class="switch_22">{{valueitem}}</view> <t-icon name="calendar-2" size="18" color="#222" data-name="calendar-2"/></view>
<!-- <view class="switch_3"><t-icon name="chevron-right" size="18" color="#222" data-name="chevron-right"/></view> -->
</view>
<view class="tt_calendar">
<!-- <t-calendar visible="{{visible}}" value="{{value}}" minDate="{{minDate}}" maxDate="{{maxDate}}" format="{{format}}" bind:confirm="handleConfirm" type="range" /> -->
</view>
<!-- <t-cell arrow title="区间选择日历" /> -->
<view class="canvasbox" hidden="{{visible}}">
<ec-canvas id="mychart_line1" canvas-id="mychart_line1" ec="{{ ec }}"></ec-canvas>
</view>
<view class="canvasbox1" hidden="{{visible}}">
<ec-canvas id="mychart_line2" canvas-id="mychart_line2" ec="{{ ech }}"></ec-canvas>
</view>
</view>
    </swiper-item>
    <swiper-item>
      <view class="proportion" wx:if="{{tapindex==1}}">
 
 <view class="proportion_1"></view>
 <view class="proportion_">
 <view class="proportion_c" style=" width: 40%;"></view>
 </view>
 <view class="cumulative">
  <view class="cumulative_1">
  <view class="cumulative_2"></view>
  <view class="cumulative_3">
  <view>峰值充电功率</view>
  <view>{{Electricitylevel.maxChargeActivePower}}kW</view>
  </view>
  </view>
  <view class="cumulative_1">
  <view class="cumulative_22"></view>
  <view class="cumulative_3">
  <view>峰值放电功率</view>
  <view>{{Electricitylevel.maxDischargeActivePower}}kW</view>
  </view>
  </view>
 </view>
 <view class="proportion_2"></view>
 <view class="switch">
 <view class="switch_11" bind:tap="Lastday"><t-icon name="chevron-left" size="18" color="#222" data-name="chevron-left"/><view class="switch_22">上一天</view>  </view>
 <view class="switch_2" bind:tap="handleCalendar"><view class="switch_22">{{valueitem}}</view><t-icon name="calendar-2" size="18" color="#222" data-name="calendar-2"/></view>
 <view class="switch_33" bind:tap="dayfollowing"><view>下一天</view> <t-icon name="chevron-right" size="18" color="#222" data-name="chevron-right"/></view>
 </view>
 <view class="proportion_2"></view>
 
 <view class="canvasbox1" hidden="{{visible}}">
 <ec-canvas id="mychart_line2" canvas-id="mychart_line2" ec="{{ ech }}"></ec-canvas>
 </view>
 <view class="tt_calendar">
 <!-- <t-calendar visible="{{visible}}" value="{{value}}" minDate="{{minDate}}" maxDate="{{maxDate}}" format="{{format}}" bind:confirm="handleConfirm" /> -->
 </view>
 </view>
    </swiper-item>
    <swiper-item>
      <view class="proportion" wx:if="{{tapindex==2}}">
  <view class="proportion_">
<view class="proportion_c" style=" width: 40%;"></view>
</view>
<view class="cumulative">
 <view class="cumulative_1">
 <view class="cumulative_2"></view>
 <view class="cumulative_3">
 <view>本日充电时长</view>
 <view>{{Electricitylevel.total.accumulatedchargetime}}h</view>
 </view>
 </view>
 <view class="cumulative_1">
 <view class="cumulative_22"></view>
 <view class="cumulative_3">
 <view>本日放电时长</view>
 <view>{{Electricitylevel.total.accumulateddischargetime}}h</view>
 </view>
 </view>
</view>
<view class="datelabel" bind:tap="onlabel">
<view class="datelabel_1" data-index="1" style="{{labelindex==1?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">日</view>
<view class="datelabel_2" data-index="2" style="{{labelindex==2?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">月</view>
<view class="datelabel_3" data-index="3" style="{{labelindex==3?'border:2rpx solid #007544;color:#007544':'border:2rpx solid #fff;color:#222'}}">年</view>
</view>
<view class="switch1">
<!-- <view class="switch_1"><t-icon name="chevron-left" size="18" color="#222" data-name="chevron-left"/></view> -->
<view class="switch_2_" bind:tap="handleCalendar"><view class="switch_22">{{valueitem}}</view><t-icon name="calendar-2" size="18" color="#222" data-name="calendar-2"/></view>
<!-- <view class="switch_3"> <t-icon name="chevron-right" size="18" color="#222" data-name="chevron-right"/></view> -->
</view>
<view class="tt_calendar">
<!-- <t-calendar visible="{{visible}}" value="{{value}}" minDate="{{minDate}}" maxDate="{{maxDate}}" format="{{format}}" bind:confirm="handleConfirm" type="range" /> -->
</view>
<view class="proportion_2"></view>
<view class="canvasbox1" hidden="{{visible}}">
<ec-canvas id="mychart_line2" canvas-id="mychart_line2" ec="{{ ech }}"></ec-canvas>
</view>
</view>
    </swiper-item>
</swiper>
</view>
<t-calendar visible="{{visible}}" value="{{value}}" minDate="{{minDate}}" maxDate="{{maxDate}}" format="{{format}}" bind:confirm="handleConfirm" bind:close="bindclose" type="{{rangetype}}" />
</view>