nsgk_wechat/pages/statistics/statistics.wxml

<!--pages/statistics/statistics.wxml-->
<cover-view class="ns" id="top_ban" style="height:{{isIPX?'88px':'64px'}};">
  <cover-image src="https://www.nongshen.net/static/wechat/lubeijing.jpg" style="top:0;left: 0;width: 100%;height: 100%;" mode="widthFix" bindtap="back"></cover-image>
  <cover-image src="/image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};height: 19.0909px;" mode="widthFix" bindtap="back"></cover-image>
  <cover-image src="/image/icon/sztj_tit.png" style="top:{{isIPX?'54px':'30px'}};width: 80px;height:20px;left: 50%;transform: translateX(-50%);"></cover-image>
</cover-view>

<view style="margin:{{isIPX?'108px':'83px'}} auto 0;display: flex; justify-content: space-between; width: 90%;">
  <view bindtap="onTimeShow" class="wrap">
    <picker mode="date" fields="year" value="{{date}}" bindchange="bindDateChange">
      <view class="picker">
        <text class="color-gray">{{date}}年</text>
        <image src="/image/icon/triangle.png" style="width: 12px;height: 8px;margin-left: 5px;"></image>
      </view>
    </picker>
  </view>
  
  <!-- <view style="display: flex;align-items: center;border: 1px solid #DCDCDC; padding: 2px 10px;border-radius: 20px;">
    <image src="/image/icon/icon_user.png" style="width:15.38px;height:12.53px;"></image>
    <text style="color: #878787;">古龙村一组合作社</text>
  </view> -->
</view>

<view class="main-box">
  <view class="shouzhi_box">
    <view class="pro_box">
      <text class="pro_tit">· 收入</text>
      <text class="pro_money">￥{{topDetail.jieAmount}}</text>
      <view style="width: 50%;margin: 0 auto;;">
        <van-progress percentage="50" stroke-width="8" color="#5CAE77" show-pivot="{{false}}" />
      </view>
    </view>
    <image src="/image/icon/icon_ddd.png" style="width: 5px;height: 25px;"></image>
    <view class="pro_box">
      <text class="pro_tit">· 支出</text>
      <text class="pro_money red">￥{{topDetail.daiAmount}}</text>
      <view style="width: 50%;margin: 0 auto;;">
        <van-progress percentage="50" stroke-width="8" color="#E90000" show-pivot="{{false}}" />
      </view>
    </view>
  </view> 

  <view style="display: flex;justify-content: space-between;margin-top: 15px;">
  
    <view class="boxPro_box">
      <view class="pro_box">
        <text class="pro_tit">总笔数</text>
        <text class="pro_money small">{{topDetail.incomeTransactionsNum}}</text>
      </view>
      <view class="pro_box">
        <text class="pro_tit">大额笔数</text>
        <text class="pro_money small">{{topDetail.incomeLargeTransactionsNum}}</text>
      </view>
    </view>
    <view class="boxPro_box">
      <view class="pro_box">
        <text class="pro_tit">总笔数</text>
        <text class="pro_money small red">{{topDetail.transactionsNum}}</text>
      </view>
      <view class="pro_box">
        <text class="pro_tit">大额笔数</text>
        <text class="pro_money small red">{{topDetail.largeTransactionsNum}}</text>
      </view>
      <view class="pro_box">
        <text class="pro_tit">总人次</text>
        <text class="pro_money small red">{{topDetail.peopleSecond}}</text>
      </view>
    </view>

  </view>

</view>

<view class="main-box">
  <view style="display: flex;align-items: center;justify-content: space-between;">
    <view style="display: flex;align-items: center;">
      <image src="/image/icon/icon_tjzb.png" style="width: 14px;height: 14px;margin-right: 5px;"></image>
      <text>统计占比</text>
    </view>
    <view class="tab" wx:if="{{showList}}">
      <text class="{{showSR ? 'active':''}}" bindtap="goSR">收入</text>
      <text class="{{showZC ? 'active':''}}" bindtap="goZC">支出</text>
    </view>
    <text style="background:#F1F1F1;color:#878787;font-size:12px;padding:2px 10px;border-radius:15px;">单位：%</text>
  </view>

  <view class="container" wx:if="{{!showList}}">
    <ec-canvas id="mychart-one" force-use-old-canvas="true" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
  </view>
  <view class="container" wx:if="{{showSR}}">
    <ec-canvas id="mychart-one2" force-use-old-canvas="true" canvas-id="mychart-pie" ec="{{ ec3 }}"></ec-canvas>
  </view>
  <view class="container" wx:if="{{showZC}}">
    <ec-canvas id="mychart-one3" force-use-old-canvas="true" canvas-id="mychart-pie" ec="{{ ec4 }}"></ec-canvas>
  </view>



  <block wx:if="{{showSR}}">
    <view style="display: flex;align-items: center;margin-bottom: 15px;" wx:for="{{centerRow[1]}}" wx:key="index">
      <image src="/image/icon/icon_jy.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.incomeType == 1}}"></image>
      <image src="/image/icon/icon_fb.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.incomeType == 2}}"></image>
      <image src="/image/icon/icon_bz.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.incomeType == 3}}"></image>
      <image src="/image/icon/icon_qt.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.incomeType == 4}}"></image>
      <image src="/image/icon/icon_tz.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.incomeType == 5}}"></image>
      <view style="flex: 1;">
        <view style="display:flex;justify-content: space-between;">
          <text style="margin-bottom: 5px;display: block;">{{item.incomeType == 1 ? '经营收入' : item.incomeType == 2 ? '发包收入' : item.incomeType == 3 ? '补助收入' : item.incomeType == 4 ? '其他收入' : item.incomeType == 5 ? '投资收益' : ''}}</text>
          <text style="font-size: 18px;display: block;"><text style="font-size: 14px;">￥</text>{{item.jieAmount}}</text>
        </view>
        <van-progress percentage="{{item.percentage}}" stroke-width="10" color="{{item.incomeType == 1 ? '#FC9A55' : item.incomeType == 2 ? '#B3DB62 ' : item.incomeType == 3 ? '#5CAE77' : item.incomeType == 4 ? '#1F78B4' : item.incomeType == 5 ? '#F67474' : ''}}" show-pivot="{{false}}" />
      </view>
    </view>
  </block>

  <block wx:if="{{showZC}}">
    <view style="display: flex;align-items: center;margin-bottom: 15px;" wx:for="{{centerRow[2]}}" wx:key="index" wx:if="{{item.expenditureType != 3}}">
      <image src="/image/icon/icon_jy.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.expenditureType == 1}}"></image>
      <image src="/image/icon/icon_fb.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.expenditureType == 2}}"></image>
      <image src="/image/icon/icon_qt.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.expenditureType == 5}}"></image>
      <image src="/image/icon/icon_tz.png" style="width: 34px;height: 34px;margin-right: 10px;" wx:if="{{item.expenditureType == 4}}"></image>
      <view style="flex: 1;">
        <view style="display:flex;justify-content: space-between;">
          <text style="margin-bottom: 5px;display: block;">{{item.expenditureType == 1 ? '结算' : item.expenditureType == 2 ? '工程项目 ' : item.expenditureType == 4 ? '合同' : item.expenditureType == 5 ? '其他' : ''}}</text>
          <text style="font-size: 18px;display: block;"><text style="font-size: 14px;">￥</text>{{item.daiAmount}}</text>
        </view>
        <van-progress percentage="{{item.percentage}}" stroke-width="10" color="{{item.expenditureType == 1 ? '#FC9A55' : item.expenditureType == 2 ? '#B3DB62 ' : item.expenditureType == 4 ? '#1F78B4' : item.expenditureType == 5 ? '#F67474' : ''}}" show-pivot="{{false}}" />
      </view>
    </view>
  </block>


  <view style="text-align:center;">
    <image src="/image/icon/icon_cBtn.png" style="width: 22px;height: 22px;margin: 0 auto;" wx:if="{{!showList}}" bindtap="showList"></image>
    <image src="/image/icon/icon_cTop.png" style="width: 22px;height: 22px;margin: 0 auto;" wx:if="{{showList}}" bindtap="CloseList"></image>
  </view>
</view> 

<view class="main-box">
  <view style="display: flex;align-items: center;">
    <image src="/image/icon/icon_zs.png" style="width: 14px;height: 14px;margin-right: 5px;"></image>
    <text>收/支走势</text>
    <text style="background:#F1F1F1;color:#878787;font-size:12px;padding:2px 10px;border-radius:15px;margin-left: auto;">单位：元</text>
  </view>

  <view class="container">
    <ec-canvas id="mychart-one4" force-use-old-canvas="true" canvas-id="mychart-pie" ec="{{ ec2 }}"></ec-canvas>
  </view>

  <view class="tr head">
    <text>笔数</text>
    <text>收入</text>
    <text>月份</text>
    <text>笔数</text>
    <text>支出</text>
  </view>
  <view class="tr" wx:for="{{list}}">
    <text>{{item.incomeTransactionsNum}}</text>
    <text>{{item.jieAmount}}</text>
    <text>{{item.month}}月</text>
    <text>{{item.transactionsNum}}</text>
    <text>{{item.daiAmount}}</text>
  </view>
</view>