electricity_bill_calc_wx/childPackage/pages/billDetail/index.wxml

<!--pages/billDetail/index.wxml-->
<navigator title="{{ time }}电费账单" canBack="{{true}}" />
<view class="title" style="top: {{statusBarHeight + 46}}px">
  <avatar text="{{detail.tenement.shortName}}" />
  <view class="titleContent">
    <view class="park">
      <view class="label">
        所属园区：
      </view>
      <view class="value"> {{ detail.park.name }} </view>
    </view>
    <view class="address">
      <view class="label">
        用电地址：
      </view>
      <view class="value"> {{ detail.tenement.address }} </view>
    </view>
    <view class="time">
      <view class="label">
        账单周期：
      </view>
      <view class="value"> {{ detail.comprehensive.startDate }} 至 {{ detail.comprehensive.endDate }} </view>
    </view>
  </view>
  <van-button type="info" size="small" class="download" bind:click="download">下载</van-button>
</view>

<view class="wrapper" wx:if="{{detail.park.meter04kvType !== 1}}">
  <view class="line"></view>
  <view class="contentTitle"> 本期账单 </view>
  <van-row gutter="10">
    <van-col span="8">
      <view class="colContent">
        <view class="colContentTitle">本期用电量</view>
        <view class="colContentValue" wx:if="{{detail.park.meter04kvType === 0}}"> {{ amount }} 千瓦时 </view>
      </view>
    </van-col>
    <van-col span="8">
      <view class="colContent">
        <view class="colContentTitle">本期电单价</view>
        <view class="colContentValue"> {{ detail.comprehensive.price }} 元 </view>
      </view>
    </van-col>
    <van-col span="8">
      <view class="colContent">
        <view class="colContentTitle">本期电费</view>
        <view class="colContentValue"> {{ detail.comprehensive.total }} 元 </view>
      </view>
    </van-col>
  </van-row>
  <view class="line"></view>
  <view class="contentTitle"> 电费构成 </view>
  <echarts style="width:200rpx;height:180rpx;" id="echarts" class='mychart-bar' canvas-id="mychart-bar" ec="{{ ec }}" forceUseOldCanvas="{{false}}">
  </echarts>
  <view class="tooltip">
    （电度电量+线损电量）*电单价+摊薄公摊电费+摊薄调整电费
  </view>
  <view class="line"></view>
  <view class="contentTitle"> 电量明细 </view>
  <view class="tableWrapper" wx:for="{{meters}}">
    <view style="margin: 20rpx 0; background-color: #fff;">
      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
        <van-col span="6">
          <view class="tableTitle"> 电表地址 </view>
          <view class="tableContent"> {{item.address}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 起码 </view>
          <view class="tableContent"> {{item.startNumber}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 止码 </view>
          <view class="tableContent"> {{item.endNumber}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 倍率 </view>
          <view class="tableContent"> {{item.ratio}} </view>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <view class="tableTitle"> 电度电量 </view>
          <view class="tableContent"> {{item.overall.amount}} </view>

        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 线损电量 </view>
          <view class="tableContent"> {{item.loss.amount}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 公摊电量 </view>
          <view class="tableContent"> {{item.publicAmount}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电量 </view>
          <view class="tableContent"> {{item.finalAmount}} </view>
        </van-col>
      </van-row>
    </view>
  </view>
</view>
<view class="wrapper" wx:if="{{detail.park.meter04kvType === 1}}">
  <view class="line"></view>
  <view class="contentTitle"> 本期账单 </view>
  <van-row gutter="10">
    <van-col span="12">
      <view class="colContent">
        <view class="colContentTitle">本期用电量</view>
        <view class="colContentValue"> {{ detail.comprehensive.finalAmount }} 千瓦时 </view>
      </view>
    </van-col>
    <van-col span="12">
      <view class="colContent">
        <view class="colContentTitle">本期电费</view>
        <view class="colContentValue"> {{ detail.comprehensive.total }} 元 </view>
      </view>
    </van-col>
  </van-row>
  <view class="line"></view>
  <view class="contentTitle"> 分时明细 </view>
  <van-row gutter="10">
    <van-col span="12">
      <view class="colContent">
        <view class="colContentTitle">
          分时电量
          <view> （千瓦时） </view>
        </view>
        <view class="colContentValue2">尖： {{ detail.comprehensive.sharpAmount }} </view>
        <view class="colContentValue2">峰： {{ detail.comprehensive.peakAmount }} </view>
        <view class="colContentValue2">平： {{ detail.comprehensive.flatAmount }} </view>
        <view class="colContentValue2">谷： {{ detail.comprehensive.valleyAmount }} </view>
      </view>
    </van-col>
    <van-col span="12">
      <view class="colContent">
        <view class="colContentTitle">
          分时单价
          <view> （元/千瓦时） </view>
        </view>
        <view class="colContentValue2">尖： {{ detail.comprehensive.priceSharp }} </view>
        <view class="colContentValue2">峰： {{ detail.comprehensive.pricePeak }} </view>
        <view class="colContentValue2">平： {{ detail.comprehensive.priceFlat }} </view>
        <view class="colContentValue2">谷： {{ detail.comprehensive.priceValley }} </view>
      </view>
    </van-col>
  </van-row>
  <view class="line"></view>
  <view class="tooltip">
    （电度电量+线损电量）*单价+摊薄公摊电费+摊薄调整电费
  </view>
  <view class="line"></view>
  <view class="contentTitle"> 分时电量明细 </view>
  <view class="tableWrapper">
    <view class="meterListItem" wx:for="{{meters}}" wx:key="id">
      <div class="top">
        <view class="address">{{item.address}}</view>
        <view class="detail primaryTextBtn" bind:tap="jumpToDetail" data-meter="{{item}}"> 详情 </view>
      </div>
      <view style="margin: 20rpx 0; background-color: #fff;">
        <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
          <van-col span="6">
            <view class="tableTitle"> 电度电量 </view>
          </van-col>
          <van-col span="6">
            <view class="tableTitle"> 线损电量 </view>
          </van-col>
          <van-col span="6">
            <view class="tableTitle"> 合计电量 </view>
          </van-col>
          <van-col span="6">
            <view class="tableTitle"> 合计电费 </view>
          </van-col>
        </van-row>
        <van-row class="meterListItemContent">
          <van-col span="6">
            <view class="tableContent"> {{item.overall.amount}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.loss.amount}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.finalAmount}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.finalTotal}} </view>
          </van-col>
        </van-row>
      </view>
    </view>
    <!-- <view style="font-size: 30rpx;font-weight: 600;"> 尖 </view> -->
    <!-- <view style="margin: 20rpx 0; background-color: #fff;">
      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
        <van-col span="6">
          <view class="tableTitle"> 电表地址 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 起码 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 止码 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 电度电量 </view>
        </van-col>
      </van-row>
      <view class="top">
        <view class="meterListItem"  wx:for="{{meters}}" wx:key="id">
        <van-row>
          <van-col span="6">
            <view class="tableContent"> {{item.address}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.startSharp}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.endSharp}} </view>
          </van-col>

          <van-col span="6">
            <view class="tableContent"> {{item.critical.amount}} </view>
          </van-col>
        </van-row>
      </view>
      </view>
      <van-row>
        <van-col span="6">
          <view class="tableTitle"> 线损电量 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 公摊电量 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电量 </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电费 </view>
        </van-col>
      </van-row>
      <view class="bottom">
        <view class="meterListItem"  wx:for="{{meters}}" wx:key="id">
        <van-row>
          <van-col span="6">
            <view class="tableContent"> {{item.lossSharp}} </view>
          </van-col>
          <van-col span="6">
            <view class="tableContent"> {{item.poolSharp}} </view>
          </van-col>
          <van-col span="6">
            <view class="tableContent"> {{item.finalSharp}} </view>
          </van-col>
          <van-col span="6">
            <view class="tableContent"> {{item.chargeSharp}} </view>
          </van-col>
        </van-row>
      </view>
    </view> 
      </view>
     
    <view style="font-size: 30rpx;font-weight: 600;"> 峰 </view>
    <view style="margin: 20rpx 0; background-color: #fff;">
      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
        <van-col span="6">
          <view class="tableTitle"> 电表地址 </view>
          <view class="tableContent"> {{item.address}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 起码 </view>
          <view class="tableContent"> {{item.startPeak}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 止码 </view>
          <view class="tableContent"> {{item.endPeak}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 电度电量 </view>
          <view class="tableContent"> {{item.peak.amount}} </view>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <view class="tableTitle"> 线损电量 </view>
          <view class="tableContent"> {{item.lossPeak}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 公摊电量 </view>
          <view class="tableContent"> {{item.poolPeak}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电量 </view>
          <view class="tableContent"> {{item.finalPeak}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电费 </view>
          <view class="tableContent"> {{item.chargePeak}} </view>
        </van-col>
      </van-row>
    </view>
    <view style="font-size: 30rpx;font-weight: 600;"> 平 </view>
    <view style="margin: 20rpx 0; background-color: #fff;">
      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
        <van-col span="6">
          <view class="tableTitle"> 电表地址 </view>
          <view class="tableContent"> {{item.address}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 起码 </view>
          <view class="tableContent"> {{item.startFlat}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 止码 </view>
          <view class="tableContent"> {{item.endFlat}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 电度电量 </view>
          <view class="tableContent"> {{item.flat.amount}} </view>
        </van-col>
        
      </van-row>
      <van-row>

        <van-col span="6">
          <view class="tableTitle"> 线损电量 </view>
          <view class="tableContent"> {{item.lossFlat}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 公摊电量 </view>
          <view class="tableContent"> {{item.poolFlat}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电量 </view>
          <view class="tableContent"> {{item.finalFlat}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电费 </view>
          <view class="tableContent"> {{item.chargeFlat}} </view>
        </van-col>
      </van-row>
    </view>
    <view style="font-size: 30rpx;font-weight: 600;"> 谷 </view>
    <view style="margin: 20rpx 0; background-color: #fff;">
      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
        <van-col span="6">
          <view class="tableTitle"> 电表地址 </view>
          <view class="tableContent"> {{item.address}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 起码 </view>
          <view class="tableContent"> {{item.startValley}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 止码 </view>
          <view class="tableContent"> {{item.endValley}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 电度电量 </view>
          <view class="tableContent"> {{item.valley.amount}} </view>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <view class="tableTitle"> 线损电量 </view>
          <view class="tableContent"> {{item.lossValley}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 公摊电量 </view>
          <view class="tableContent"> {{item.poolValley}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电量 </view>
          <view class="tableContent"> {{item.finalValley}} </view>
        </van-col>
        <van-col span="6">
          <view class="tableTitle"> 合计电费 </view>
          <view class="tableContent"> {{item.chargeValley}} </view>
        </van-col>
      </van-row>
    </view> -->
  </view>
</view>
<view style="height: 20rpx;"></view>